├── static
    ├── favicon.ico
    └── README.md
├── scripts
    ├── object-type.json
    ├── objects.json
    └── import.js
├── .gitignore
├── components
    ├── 404.vue
    ├── Page.vue
    ├── Footer.vue
    └── Nav.vue
├── config.js
├── .editorconfig
├── layouts
    ├── README.md
    └── default.vue
├── pages
    ├── README.md
    ├── index.vue
    └── _slug
    │   └── index.vue
├── assets
    └── README.md
├── plugins
    └── README.md
├── middleware
    └── README.md
├── store
    └── README.md
├── .eslintrc.js
├── README.md
├── package.json
└── nuxt.config.js


/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cosmicjs/vue-starter/HEAD/static/favicon.ico


--------------------------------------------------------------------------------
/scripts/object-type.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"title": "Pages",
3 | 	"slug": "pages",
4 | 	"singular": "page"
5 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # dependencies
 2 | node_modules
 3 | 
 4 | # logs
 5 | npm-debug.log
 6 | 
 7 | # Nuxt build
 8 | .nuxt
 9 | 
10 | # Nuxt generate
11 | dist
12 | 
13 | .DS_Store


--------------------------------------------------------------------------------
/components/404.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <h1>404 Page Not Found</h1>
4 |     <div>Oops! The content you are looking for does not exist in your Cosmic JS Bucket.</div>
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/config.js:
--------------------------------------------------------------------------------
1 | import Cosmic from 'cosmicjs'
2 | const api = Cosmic()
3 | const bucket = api.bucket({
4 |   slug: process.env.COSMIC_BUCKET,
5 |   read_key: process.env.COSMIC_READ_KEY
6 | })
7 | export default bucket


--------------------------------------------------------------------------------
/components/Page.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>{{ page.title }}</h1>
 4 |     <div v-html="page.content"></div>
 5 |   </div>
 6 | </template>
 7 | <script>
 8 | export default {
 9 |    props: ['page'],
10 | }
11 | </script>
12 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_size = 2
 6 | indent_style = space
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div className="footer">
3 |     &copy;{{ new Date().getFullYear() }} <a href="https://cosmicjs.com">Cosmic JS</a> Vue Starter. <a href="https://github.com/cosmicjs/vue-starter" target="_blank">View the code</a>.
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/layouts/README.md:
--------------------------------------------------------------------------------
1 | # LAYOUTS
2 | 
3 | This directory contains your Application Layouts.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/views#layouts
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/pages/README.md:
--------------------------------------------------------------------------------
1 | # PAGES
2 | 
3 | This directory contains your Application Views and Routes.
4 | The framework reads all the .vue files inside this directory and creates the router of your application.
5 | 
6 | More information about the usage of this directory in the documentation:
7 | https://nuxtjs.org/guide/routing
8 | 


--------------------------------------------------------------------------------
/assets/README.md:
--------------------------------------------------------------------------------
1 | # ASSETS
2 | 
3 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/assets#webpacked
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/components/Nav.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <ul>
3 |     <li><router-link to="/"><a>Home</a></router-link></li>
4 |     <li><router-link to="/about"><a>About</a></router-link></li>
5 |     <li><router-link to="/contact"><a>Contact</a></router-link></li>
6 |     <li><router-link to="/not-found"><a>Not found</a></router-link></li>
7 |   </ul>
8 | </template>


--------------------------------------------------------------------------------
/plugins/README.md:
--------------------------------------------------------------------------------
1 | # PLUGINS
2 | 
3 | This directory contains your Javascript plugins that you want to run before instantiating the root vue.js application.
4 | 
5 | More information about the usage of this directory in the documentation:
6 | https://nuxtjs.org/guide/plugins
7 | 
8 | **This directory is not required, you can delete it if you don't want to use it.**
9 | 


--------------------------------------------------------------------------------
/static/README.md:
--------------------------------------------------------------------------------
 1 | # STATIC
 2 | 
 3 | This directory contains your static files.
 4 | Each file inside this directory is mapped to /.
 5 | 
 6 | Example: /static/robots.txt is mapped as /robots.txt.
 7 | 
 8 | More information about the usage of this directory in the documentation:
 9 | https://nuxtjs.org/guide/assets#static
10 | 
11 | **This directory is not required, you can delete it if you don't want to use it.**
12 | 


--------------------------------------------------------------------------------
/middleware/README.md:
--------------------------------------------------------------------------------
 1 | # MIDDLEWARE
 2 | 
 3 | This directory contains your Application Middleware.
 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
 5 | 
 6 | More information about the usage of this directory in the documentation:
 7 | https://nuxtjs.org/guide/routing#middleware
 8 | 
 9 | **This directory is not required, you can delete it if you don't want to use it.**
10 | 


--------------------------------------------------------------------------------
/scripts/objects.json:
--------------------------------------------------------------------------------
 1 | [
 2 | 	{
 3 | 		"title": "Home",
 4 | 		"slug": "home",
 5 | 		"content": "This is the home page content.",
 6 | 		"type_slug": "pages"
 7 | 	},
 8 | 	{
 9 | 		"title": "About",
10 | 		"slug": "about",
11 | 		"content": "This is the about page content.",
12 | 		"type_slug": "pages"
13 | 	},
14 | 	{
15 | 		"title": "Contact",
16 | 		"slug": "contact",
17 | 		"content": "This is the contact page content.",
18 | 		"type_slug": "pages"
19 | 	}
20 | ]


--------------------------------------------------------------------------------
/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | This directory contains your Vuex Store files.
 4 | Vuex Store option is implemented in the Nuxt.js framework.
 5 | Creating a index.js file in this directory activate the option in the framework automatically.
 6 | 
 7 | More information about the usage of this directory in the documentation:
 8 | https://nuxtjs.org/guide/vuex-store
 9 | 
10 | **This directory is not required, you can delete it if you don't want to use it.**
11 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     browser: true,
 5 |     node: true
 6 |   },
 7 |   parserOptions: {
 8 |     parser: 'babel-eslint'
 9 |   },
10 |   extends: [
11 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
12 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
13 |     'plugin:vue/essential'
14 |   ],
15 |   // required to lint *.vue files
16 |   plugins: [
17 |     'vue'
18 |   ],
19 |   // add your custom rules here
20 |   rules: {}
21 | }
22 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <nuxt/>
 4 |   </div>
 5 | </template>
 6 | <style>
 7 | html {
 8 |   font-family: sans-serif;
 9 | }
10 | body {
11 |   margin: 0;
12 |   padding: 0;
13 | }
14 | .main, .footer {
15 |   padding: 0 20px 20px;
16 |   max-width: 960px;
17 |   margin: 0 auto;
18 | }
19 | .hero {
20 |   background: #29ABE2;
21 |   width: 100%;
22 | }
23 | .hero h1 {
24 |   margin: 0;
25 |   font-size: 30px;
26 |   padding: 30px;
27 |   max-width: 960px;
28 |   margin: 0 auto;
29 | }
30 | .hero h1 a {
31 |   color: #fff;
32 |   text-decoration: none;
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Starter
 2 | Vue starter app powered by [Cosmic JS](https://cosmicjs.com) 🚀
 3 | 
 4 | ## Installation
 5 | Install via the [Cosmic CLI](https://github.com/cosmicjs/cosmic-cli).
 6 | ```bash
 7 | npm i -g cosmic-cli
 8 | 
 9 | # Login to your Cosmic JS account
10 | cosmic login
11 | 
12 | # Installs example content to a new or existing Bucket and downloads the app locally
13 | cosmic init vue-starter
14 | cd vue-starter
15 | cosmic start
16 | ```
17 | ## [Vue.js CMS](https://cosmicjs.com/knowledge-base/vuejs-cms)
18 | Cosmic JS offers a [Headless CMS](https://cosmicjs.com/headless-cms) for your Vue.js websites and apps.
19 | 


--------------------------------------------------------------------------------
/scripts/import.js:
--------------------------------------------------------------------------------
 1 | const Cosmic = require('cosmicjs')
 2 | const api = Cosmic()
 3 | const COSMIC_BUCKET = process.env.COSMIC_BUCKET || 'node-starter'
 4 | const bucket = api.bucket({
 5 | 	slug: COSMIC_BUCKET,
 6 | 	read_key: process.env.COSMIC_READ_KEY,
 7 | 	write_key: process.env.COSMIC_WRITE_KEY
 8 | })
 9 | const default_objects = require('./objects')
10 | const default_object_type = require('./object-type')
11 | const importObjects = async () => {
12 | 	try {
13 | 		const res = await bucket.getObjects()
14 | 		if(res.status === 'empty') {
15 | 			bucket.addObjectType(default_object_type)
16 | 			default_objects.forEach(object => {
17 | 				bucket.addObject(object)
18 | 			})
19 | 		}
20 | 	} catch (e) {
21 | 		console.log(e)
22 | 	}
23 | }
24 | importObjects()
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-starter",
 3 |   "version": "1.0.0",
 4 |   "description": "Nuxt.js project",
 5 |   "author": "Tony Spiro <tspiro@tonyspiro.com>",
 6 |   "private": true,
 7 |   "scripts": {
 8 |     "dev": "nuxt",
 9 |     "build": "nuxt build",
10 |     "start": "nuxt start",
11 |     "develop": "npm run dev",
12 |     "generate": "nuxt generate",
13 |     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
14 |     "precommit": "npm run lint",
15 |     "import": "node ./scripts/import.js"
16 |   },
17 |   "dependencies": {
18 |     "cosmicjs": "^3.2.7",
19 |     "nuxt": "^2.3.4"
20 |   },
21 |   "devDependencies": {
22 |     "babel-eslint": "^8.2.1",
23 |     "eslint": "^4.15.0",
24 |     "eslint-friendly-formatter": "^3.0.0",
25 |     "eslint-loader": "^1.7.1",
26 |     "eslint-plugin-vue": "^4.0.0"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   /*
 3 |   ** Headers of the page
 4 |   */
 5 |   head: {
 6 |     title: 'vue-starter',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |       { hid: 'description', name: 'description', content: 'Nuxt.js project' }
11 |     ],
12 |     link: [
13 |       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
14 |     ]
15 |   },
16 |   /*
17 |   ** Customize the progress bar color
18 |   */
19 |   loading: { color: '#3B8070' },
20 |   /*
21 |   ** Build configuration
22 |   */
23 |   build: {
24 |     /*
25 |     ** Run ESLint on save
26 |     */
27 |     extend (config, { isDev }) {
28 |       if (isDev && process.client) {
29 |         config.module.rules.push({
30 |           enforce: 'pre',
31 |           test: /\.(js|vue)$/,
32 |           loader: 'eslint-loader',
33 |           exclude: /(node_modules)/
34 |         })
35 |       }
36 |     }
37 |   },
38 |   env: {
39 |     COSMIC_BUCKET: process.env.COSMIC_BUCKET || 'node-starter',
40 |     COSMIC_READ_KEY: process.env.COSMIC_READ_KEY || '',
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="hero"><h1><a href="/">Cosmic JS Vue Starter</a></h1></div>
 4 |     <div class="main">
 5 |       <PageNotFound v-if="page.component && page.component==='404'" />
 6 |       <Page :page="page" v-else />
 7 |       <Nav />
 8 |       <Footer />
 9 |     </div>
10 |   </div>
11 | </template>
12 | <script>
13 | import Nav from '~/components/Nav.vue'
14 | import Footer from '~/components/Footer.vue'
15 | import Page from '~/components/Page.vue'
16 | import PageNotFound from '~/components/404.vue'
17 | import bucket from '~/config'
18 | export default {
19 |   async asyncData({ req, params }) {
20 |     const slug = 'home'
21 |     let page
22 |     try {
23 |       const res = await bucket.getObject({ slug })
24 |       page = res.object
25 |     }
26 |     catch(e) {
27 |       page = {
28 |         title: 'Page not found',
29 |         component: '404'
30 |       }
31 |     }
32 |     return { page }
33 |   },
34 |   components: {
35 |     Nav,
36 |     Page,
37 |     Footer,
38 |     PageNotFound
39 |   },
40 |   head () {
41 |     return {
42 |       title: this.page.title
43 |     }
44 |   }
45 | }
46 | </script>


--------------------------------------------------------------------------------
/pages/_slug/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="hero"><h1><a href="/">Cosmic JS Vue Starter</a></h1></div>
 4 |     <div class="main">
 5 |       <PageNotFound v-if="page.component && page.component==='404'" />
 6 |       <Page :page="page" v-else />
 7 |       <Nav />
 8 |       <Footer />
 9 |     </div>
10 |   </div>
11 | </template>
12 | <script>
13 | import Nav from '~/components/Nav.vue'
14 | import Footer from '~/components/Footer.vue'
15 | import Page from '~/components/Page.vue'
16 | import PageNotFound from '~/components/404.vue'
17 | import bucket from '~/config'
18 | export default {
19 |   async asyncData({ req, params }) {
20 |     let slug = params.slug
21 |     let page
22 |     if (!slug)
23 |       slug = 'home'
24 |     try {
25 |       const res = await bucket.getObject({ slug })
26 |       page = res.object
27 |     }
28 |     catch(e) {
29 |       page = {
30 |         title: 'Page not found',
31 |         component: '404'
32 |       }
33 |     }
34 |     return { page }
35 |   },
36 |   components: {
37 |     Nav,
38 |     Page,
39 |     Footer,
40 |     PageNotFound
41 |   },
42 |   head () {
43 |     return {
44 |       title: this.page.title
45 |     }
46 |   }
47 | }
48 | </script>


--------------------------------------------------------------------------------