Cosmic is an amazing content management system with options to categorize and distribute data in a way that makes sense to you. When building an expositional site for educational purposes, you have to display a large amount of text, images, videos and more. In this tutorial we will learn how to utilize the power of the Cosmic CMS to easily display, &nbsp;track, and update large amounts of data.<h3>TL;DR<a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a></h3><a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank">Scholastic Website Demo&nbsp;</a> <a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank">View Code on GitHub</a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank"></a> What we&#39;ll be building:<img src="https://cosmic-s3.imgix.net/a7d809e0-2350-11e9-ac6b-c39b0e8426c5-vue-cosmos-1.png" data-name="vue-cosmos-1.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Intro</h3>As there are many articles on this site to help you get started using Cosmic, this tutorial will assume you have a basic understanding of how Cosmic works. Refer to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started Guide</a>.&nbsp;As Cosmic is an API-first CMS, it is exceptionally easy to get up and running - you just need to make a simple asynchronous call in Vue. Throughout the course of this tutorial, you will be able to see just how easy it is to divvy up data and update
it using the Cosmic CMS. Installing and Setting Up our Project:In this tutorial, we will use Vue&#39;s CLI and NPM to install Cosmic and set up our project quickly and seamlessly. We also can install Vuex to utilize its global store:<pre>$ npm install -g vue-cli
$ vue init webpack cosmic-game
$ cd cosmic-game
$ npm install --save vuex cosmicjs
$ npm install
$ npm run dev</pre>Optionally, we can also add <a href="https://getbootstrap.com/" rel="noopener noreferrer" target="_blank">Bootstrap</a> (and its dependencies of jQuery and popper.js) to our project, to leverage some pre-written CSS to organize our layouts:<pre>$ npm install bootstrap jquery popper.js</pre>If you choose to add Bootstrap to your project, after running npm install&nbsp;you also need to import it in main.js:<pre>import &#39;bootstrap&#39;; import &#39;bootstrap/dist/css/bootstrap.min.css&#39;;</pre> Uploading Asset Data To Cosmic:When creating a site for educational purposes, your site requires large amounts of text, images, videos and other assets to be hosted. As you continue to iterate on your site, it is vital to not only be able to edit those assets easily but to also be
able to access them readily.First, we need to create a Bucket for our project. Once that is done, we can leverage some unique properties that Cosmic offers to compartmentalize our data. Because the site being built in this tutorial is centered around our Solar System, let&#39;s
add a new Object Type called &quot;Cosmic Assets&quot;. The Cosmic Assets Object will be responsible for containing information, images, and other assets about the inhabitants of our Solar System. For example, if I wanted to add some information about
the planet Jupiter - I would go into the &quot;Cosmic Assets&quot; Object type, and create a new Cosmic Asset named &quot;Jupiter&quot;.&nbsp;Now, we have a Cosmic Asset that can host any data we want to tie to the planet Jupiter. We can add images of Jupiter, give expositional data, and even list quick tidbits of information using the Text Input Metafield provided by the CMS.Being able to break up data of our Cosmic Assets into the content field, image Metafield and text input Metafield make it extremely easy to take a glance at the CMS and understand where each piece of data is being rendered in our Vue.js application. Setting Up Our Application:Because our solar system contains so many objects, we should leverage the v-for&nbsp;property that Vue offers us to loop through them. This prevents us from repeating our code for each celestial object, and allows us to utilize
the full power of component based design.We use three components in this project:The first component, referred to in our project as Homescreen.vue,&nbsp;is responsible for rendering everything. It &nbsp; &nbsp;calls and obtains the data we added to the Cosmic CMS, and uses it to render our application.The second component, referred to in our project as CosmicAsset.vue,&nbsp;is a short introduction to the celestial object. It displays a small image, and the name of the celestial object. If this component is clicked, it renders the next component: CosmicPage.vue.CosmicPage.vue renders a full screen component, which gives detailed information about a specific entity. It features a big expositional paragraph, some fun facts, and other information such as size and it&#39;s distance from Earth.&nbsp;Accessing Uploaded Data from Cosmic in our Vue.JS ApplicationWe can utilize the Cosmic API to access the data that we uploaded to the CMS. First, we need to initialize the Bucket that stores our project. We do this by first instantiating Cosmic in our component, and then using a promise to return data from the specific Bucket we want. Then, we can mutate the information and add it as a property on the data object of our Vue Component. We make the call to the Cosmic API on the mounted() property of Vue&#39;s lifecycle, so that the information we need is readily available as soon as the component(s) are mounted:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div>Rendering Our Components from Accessed Data:As you can see above, we find the Bucket we want, get our uploaded data from it, and mutate it how we want to. We filter the objects on the data and determine whether they are Cosmic Objects or simple content that is to be rendered on the page.We now have our Cosmic Objects stored in an array in the data property cosmicAssetObjs on the Vue Object. Using this array, we can use Vue&#39;s v-for to loop through and render our CosmicAsset component. We can break up each of these components using Boostrap classes, so they appear in a grid:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9" class="embedly-card"></a></div>As you can see we use the v-for property to loop through our array. For each element that we loop through, we pass that specific element as a prop for use by the component. We can see how props are used by looking at the component(s) itself:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100" class="embedly-card"></a></div>As you can see, we take the specific celestial entity&#39;s information in the form of an object and filter through it to display what we want it to.<h3>Conclusion</h3>In this tutorial, we uploaded a large amount of data to Cosmic so that we could create an educational application that teaches about the things in our Solar System. By leveraging the Cosmic API, we could easily and seamlessly access that data.Cosmic is a lightweight platform with an extremely powerful CMS to offer.&nbsp;If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

How to create a scholastic website using Cosmic and Vue.js

Cosmic is a great content management tool which gives you the ability to upload, access, and edit your data and media files easily. These properties make it a prime candidate to use when building web-based video games as they heavily incorporate a
large combination of media images, files, and data objects. In this tutorial, we&rsquo;ll go over how to make a simple role-playing adventure game built in Vue.JS whilst using Cosmic to manage our content.<h3>TL;DR:</h3><a href="https://cosmicjs.com/apps/vue-rpg-game" rel="noopener noreferrer" target="_blank">RPG Game</a> <a href="http://cosmic-game.cosmicapp.co" rel="noopener noreferrer" target="_blank">RPG Game Demo</a> <a href="https://github.com/cosmicjs/vue-rpg-game">RPG Game Github</a><h3>Intro</h3>As there are many articles on this site to help you get started using Cosmic, this tutorial will assume you have a basic understanding of how Cosmic works. Refer to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started Guide</a>.&nbsp;Integrating with third party applications is usually one of the most frustrating tasks of setting up a new a project. However, by making a few simple calls to Cosmic&rsquo;s API, we can retrieve our data very easily.<h3>Setting Up Your Project</h3>In this tutorial, we will use vue-cli to quickly get our project up and running. We can also easily install Cosmic using npm as well: <blockquote>$ npm install -g vue-cli$ vue init webpack cosmic-game$ cd cosmic-game$ npm install --save vuex cosmicjs$ npm install$ npm run dev</blockquote> We will then edit /config/config.js to add our bucket and add our read and write keys for authorization:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/3d28ce405a670dbedb05852234f925f0#file-config-js" class="embedly-card"></a></div> <h3>Uploading and Compartmentalizing our Game Assets using Cosmic</h3>To populate our game with its story, environment and characters, we will compartmentalize data in three buckets.The first Bucket will be &ldquo;Story&rdquo;, and will contain anything related to the actual story and environment of the game. We can easily enter and edit story text, and add assets such as environment background images here. Notice how easily we can
use the Cosmic CMS to edit our data!The next Bucket will be titled &ldquo;Hero&rdquo;. Here, as its name implies, we can add all the assets and metadata relating to the main character. This Bucket can contain all the hero&rsquo;s sprites (for example: animations for movement, actions, and
idling) as well metadata such as the hero&rsquo;s character stats.The next and final Bucket will be &ldquo;Enemies&rdquo;, and as its name suggests will have all the enemies assets and character stats.Being able to split up our RPG game into these three Buckets gives us a couple of unique advantages. Firstly, all assets are neatly filed away and are easily accessible. Secondly, the Cosmic CMS allows us to easily add and edit storylines, just as
easily as one would edit a blog post.&nbsp;<h3>Accessing Data in our Game from Cosmic</h3>We can easily access our content from Cosmic using the Cosmic API, and populate them into three Vue.JS components which reflect the three Buckets we made for the story, hero, and enemies.We can reference the following function in each of our components mounted calls, so that when the component loads our data from our Buckets is ready to use:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/9a1008dc9ec3fc73344a0db032336d43#file-getobjectfromcosmic-js" class="embedly-card"></a></div>Before our game starts, we can give our players exposition by pulling in the story from our &lsquo;Story&rsquo; Bucket. We can also use the story bucket to further set the scene by setting up the environment:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/afc04a85210b229b808cadde8f61e920#file-gethomescreenobject-js" class="embedly-card"></a></div>As you can see in the above snippet, we easily convert data hosted on Cosmic via REST API, and can store them for use in VueJS&rsquo;s data object.Using the same approach, create hero.vue and enemy.vue components and load in their metadata from their respective buckets.To make component to component dialogue easier (for example, an attack method in hero.vue affecting an enemies health), you can use state management via store, provided by Vuex &ndash; which we already installed earlier using NPM. Here is an example file
of how Vuex can use the data obtained from Cosmic to manage our store:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/db833ce817205937a90d7303ceb7fd14#file-store-js" class="embedly-card"></a></div>Now that we have all our necessary game data loaded, we can populate our game! We can load in environment images as background images in our components, add hero and enemy sprites to their respective components, and use our newly created store to handle
our battle, leveling up, and other state change logic.Here is some example code for your home screen menu, where you can see just how we populate and update data received from Cosmic:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/916b3b00c3a63ecdea4e9bd617652ab6#file-homescreen-js" class="embedly-card"></a></div> <h3>Conclusion&nbsp;</h3>Building a video game, whether in a browser or elsewhere, requires a whole lot of data management. In this tutorial, not only did we explore how easy it is to manage the data by separating it into three different Buckets &ndash; we also saw how quickly
and easily that same data can be accessed and modified. Furthermore, integration was exceptionally simple: all one had to do was run a bash command, and make sure environment keys were properly set up.Cosmic is a lightweight, but powerful platform &ndash; and I hope this tutorial was able to properly display its many strengths.If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

Blogs by Abey Joy

Start building today

Blogs by Abey Joy

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today