What we will be building. In this tutorial, I am going to show you how to create a portfolio site using and . Vue Cosmic JS TL;DR View the demo View the codebase 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 bucket**To create the bucket, login to and click add new bucket Cosmic JS Select start from scratch **Setup profiles object type**Click add object type menu and put Profile on singular name textbox 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) **Setup technologies object type**Click add object type menu and put Technology on singular name textbox Add the image metafield (image/file) **Setup projects object type**Click Add object type menu and put Projects on singular textbox Add the metafields below: 1. Short description (plain text input) 2. Image (image/file) 3. Technologies (multiple object relationship), select Technologies object type 4. URL (plain text input) 5. Open source (radio buttons), add two options there are Yes and No Dependencies This site use to create single page application. For the router it use . It also use ES6 so it need and for the module bundler. For template engine it use and as CSS preprocessor. Vue Vue Router Babel Webpack Jade Stylus Setup index.html In this file we include , , configuration and the core Javascript. Line 12 is where the app is mounted. Twitter Bootstrap Font Awesome Cosmic JS Vue Setup script.js This site use for the routing, you can see the routes on line 12–17. On line 6–10 to import the required component. Vue Router Setup App.vue This file contains router view component, footer, and global style. The template is on line 1–19. The components required by App.vue is imported on line 22–23. Line 42–49 to call API when the component is mounted and the style is on line 54–77. Cosmic JS Setup MainMenu.vue This file is for the main menu of the site. The template is on line 1–11 and in this template it use router link component from to create the anchor so the active class will be include automatically. The style is on line 13–30. Vue Router Setup Home.vue This file contains image and about text. The template is on line 1–15. Line 18 to include . Line 33–42 to call API when the component is mounted. And the style is on line 46–55. Cosmic JS Cosmic JS Setup Technologies.vue This file shows the contents from technology object type. The template is on line 1–15. Line 18 to include . Line 33–42 to call API when the component is mounted. And the style is on line 46–55. Cosmic JS Cosmic JS Setup Projects.vue and OpenSources.vue 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–16. Line 18 to include . Line 28–34 to render the technologies array and on line 38–48 to call API with metafield_key is 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–69. Cosmic JS Cosmic JS **Conclusion**This is the portfolio site built using and . I hope you like the tutorial and hopefully will help you. Vue Cosmic JS This article was on . Cosmic JS offers tools that help development teams build and manage apps faster. originally published Cosmic JS

Facebook

Twitter

How to build a simple blog using Vue, Cosmic JS and deploy to Netlify

How to Build a Portfolio Site Using Vue and Cosmic JS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

5 Essential Tools for Web Development Mastery

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps