In this tutorial, I am going to show you how to create a portfolio site using <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a> and <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>.The portfolio site we are going to build will have 4 pages there are home, technologies, projects, and open sources. This site also will have 3 object types there are profiles, technologies, and projects. Setup bucketTo create the bucket, login to <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> and click add new bucket<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e29ba8f0-e8bb-11e7-a3fc-e32b62cf4e37-add new bucket.png" style="width: 500px;" class="fr-fic fr-dib fr-fil">Select start from scratch<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/927db610-e8bb-11e7-b266-0bda9cde0587-start from scratch.png" style="width: 500px;" class="fr-fic fr-dib fr-fil"> Setup profiles object typeClick add object type menu and put Profile on singular name textbox<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a47003c0-e9e0-11e7-8701-e1ae045341bf-profile.png" style="width: 500px;" class="fr-fic fr-dib fr-fil">Add the metafields below:1. Introduction (plain text input)2. Image (image/file)3. About (HTML text area)4. Facebook (plain text input)5. Twitter (plain text input)6. Github (plain text input)7. Footer (plain text input)<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3dd82d50-e8bd-11e7-9888-6f277a1e788f-profile metafields.png" style="width: 500px;" class="fr-fic fr-dib fr-fil"> Setup technologies object typeClick add object type menu and put Technology on singular name textbox<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9241ee70-e9e0-11e7-8701-e1ae045341bf-profile.png" style="width: 500px;" class="fr-fic fr-dib fr-fil">Add the image metafield (image/file)<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e3cdf040-e9e0-11e7-9c74-775d7fd980e5-technology metafields.png" style="width: 500px;" class="fr-fic fr-dib fr-fil"> Setup projects object typeClick Add object type menu and put Projects on singular textbox<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/febc0310-e9e0-11e7-9c74-775d7fd980e5-profile.png" style="width: 500px;" class="fr-fic fr-dib fr-fil">Add the metafields below:1. Short description (plain text input)2. Image (image/file)3. Technologies (multiple object relationship), select Technologies object type<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/50417530-e9e1-11e7-8701-e1ae045341bf-technologies relationship.png" style="width: 500px;" class="fr-fic fr-dib fr-fil">4. URL (plain text input)5. Open source (radio buttons), add two options there are Yes and No<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/99c64230-e9e1-11e7-b2e8-3db4a24619e2-projects metafields.png" style="width: 500px;" class="fr-fic fr-dib fr-fil"> Dependencies<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/1090374f640dff7c32862958e6d86124' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/1090374f640dff7c32862958e6d86124" class="embedly-card"></a></div>This site use <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a> to create single page application. For the router it use <a href="https://router.vuejs.org/en/" rel="noopener noreferrer" target="_blank">Vue Router</a>. It also use ES6 so it need <a href="https://babeljs.io/" rel="noopener noreferrer" target="_blank">Babel</a> and <a href="https://webpack.js.org/">Webpack</a> for the module bundler. For template engine it use <a href="http://jade-lang.com/" rel="noopener noreferrer" target="_blank">Jade</a> and <a href="http://stylus-lang.com/" rel="noopener noreferrer" target="_blank">Stylus</a> as CSS preprocessor. Setup index.html<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/3ce3b3bd4ae36986a19480775f2450e0' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/3ce3b3bd4ae36986a19480775f2450e0" class="embedly-card"></a></div>In this file we include <a href="https://getbootstrap.com/" rel="noopener noreferrer" target="_blank">Twitter Bootstrap</a>, <a href="http://fontawesome.io" rel="noopener noreferrer" target="_blank">Font Awesome</a>, <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> configuration and the core Javascript. Line 12 is where the <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a> app is mounted. Setup script.js<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/09c2410256fafe2dd6ebb32b53d06e78' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/09c2410256fafe2dd6ebb32b53d06e78" class="embedly-card"></a></div>This site use <a href="https://router.vuejs.org/en/" rel="noopener noreferrer" target="_blank">Vue Router</a> for the routing, you can see the routes on line 12 &ndash; 17. On line 6 &ndash; 10 to import the required component. Setup App.vue<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/a52827e01b910ef982edd12432e87403' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/a52827e01b910ef982edd12432e87403" class="embedly-card"></a></div>This file contains router view component, footer, and global style. The template is on line 1 &ndash; 19. The components required by App.vue is imported on line 22 &ndash; 23. Line 42 &ndash; 49 &nbsp;to call <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> API when the component is mounted and the style is on line 54 &ndash; 77. Setup MainMenu.vue<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/a63c25fba574544daa10e829382dfeff' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/a63c25fba574544daa10e829382dfeff" class="embedly-card"></a></div>This file is for the main menu of the site. The template is on line 1 &ndash; 11 and in this template it use router link component from <a href="https://router.vuejs.org/en/" rel="noopener noreferrer" target="_blank">Vue Router</a> to create the anchor so the active class will be include automatically. The style is on line 13 &ndash; 30. Setup Home.vue<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/d45c0837562d266db2ad6eccb448ca56' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/d45c0837562d266db2ad6eccb448ca56" class="embedly-card"></a></div>This file contains image and about text. The template is on line 1 &ndash; 15. Line 18 to include <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Line 33 &ndash; 42 to call <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> API when the component is mounted. And the style is on line 46 &ndash; 55. Setup Technologies.vue<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/93f493d4c4830ab91f43e187a86083c7' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/93f493d4c4830ab91f43e187a86083c7" class="embedly-card"></a></div>This file shows the contents from technology object type. The template is on line 1 &ndash; 15. Line 18 to include <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Line 33 &ndash; 42 to call <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> API when the component is mounted. And the style is on line 46 &ndash; 55. Setup Projects.vue and OpenSources.vue<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/sandi-racy/aad998fcdb16ca3b7970dfaf82cf542d' class='embedly-card'></a>"><a href="https://gist.github.com/sandi-racy/aad998fcdb16ca3b7970dfaf82cf542d" class="embedly-card"></a></div>These two files show data from project object type, the different is Project.vue shows data from project object type when the metafield_value of open_source metafield_key is Yes and for OpenSources.vue is No. The template is on line 1 &ndash; 16. Line 18 to include <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Line 28 &ndash; 34 to render the technologies array and on line 38 &ndash; 48 to call <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>API with metafield_key is &nbsp;open_source and metafield_value is No for projects page and metafield_value is Yes for open source page. The style is on line 53 &ndash; 69. ConclusionThis is the portfolio site built using <a href="https://vuejs.org/" rel="noopener noreferrer" target="_blank">Vue</a> and <a href="http://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. I hope you like the tutorial and hopefully
will help you.

Blogs by Sandi Rosyandi

Start building today

Blogs by Sandi Rosyandi

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

Start building today