Skip to content

Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces.

Cosmic makes a great Vue CMS for your Vue websites and apps.

Before adding any code, make sure to follow the Initial Setup at the start of this section to set up your content in Cosmic. Then take the following steps to add Cosmic-powered content to your Vue.js apps:

1. Install a new Vue app

You can use the Vue CLI to install a new Vue app that includes tooling and configurations.

npm install -g @vue/cli
vue create cosmic-vue-app

2. Install the Cosmic NPM module

cd cosmic-vue-app
npm i cosmicjs

3. Add the following code into your src/App.vue file

Find your Bucket slug and API read key in Bucket Settings > API Access after logging in.

// src/App.vue
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>Cosmic Vue App</h1>
    <div v-if="loading">Loading...</div>
    <ul>
      <li v-for="post in posts" :key="post.slug">
        <div>{{ post.title }}</div>
        <img alt="" :src="post.metadata.hero.imgix_url + '?w=400'"/>
      </li>
    </ul>
  </div>
</template>
<script>
const Cosmic = require('cosmicjs')
const api = Cosmic()
// Set these values, found in Bucket > Settings after logging in at https://app.cosmicjs.com/login
const bucket = api.bucket({
  slug: "YOUR_BUCKET_SLUG",
  read_key: "YOUR_BUCKET_READ_KEY"
})
export default {
  name: 'App',
  data () {
    return {
      loading: false,
      posts: null
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.error = this.post = null
      this.loading = true
      bucket.getObjects({
        query: {
          type: 'posts'
        },
        props: 'slug,title,content,metadata' // Limit the API response data by props
      }).then(data => {
        const posts = data.objects
        this.loading = false
        this.posts = posts
      })
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
}
</style>

4. Start your app

Start your app, and go to http://localhost:3000. Dance 🎉

npm run serve

Next steps

  1. Learn more about Objects.
  2. Learn more about Queries.
  3. Learn more about Metafields.

More resources

  1. Install pre-built Vue.js templates.
  2. Read Vue.js + Cosmic articles.