├── .editorconfig ├── .eslintrc.js ├── .gitignore ├── .vscode └── launch.json ├── README.md ├── assets └── README.md ├── components ├── README.md └── SmallProduct.vue ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md └── index.vue ├── plugins └── README.md ├── static ├── README.md └── favicon.ico └── store └── README.md /.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 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | parser: 'babel-eslint', 4 | env: { 5 | browser: true, 6 | node: true 7 | }, 8 | extends: 'standard', 9 | // required to lint *.vue files 10 | plugins: [ 11 | 'html' 12 | ], 13 | // add your custom rules here 14 | rules: {}, 15 | globals: {} 16 | } 17 | -------------------------------------------------------------------------------- /.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 | # Semantic 14 | semantic/ 15 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible Node.js debug attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "node", 9 | "request": "launch", 10 | "name": "Launch via NPM", 11 | "runtimeExecutable": "npm", 12 | "windows": { 13 | "runtimeExecutable": "npm.cmd" 14 | }, 15 | "runtimeArgs": [ 16 | "run", 17 | "dev-debug" 18 | ], 19 | "port": 5858 20 | } 21 | ] 22 | } 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # A Tutorial to Bundle Cockpit CMS & Nuxt.js in a full JAMstack 3 | 4 | ![cockpit-nuxt](https://snipcart.com/media/204104/nuxt-cockpit.png) 5 | 6 | Exploring: 1) Cockpit CMS, an API-first CMS recommended by a friend, and 2) Nuxt.js, a kickass Vue.js framework (we've wanted to use it ever since we fell in love with Vue). 7 | 8 | Covering: 9 | 10 | - How to set up a Cockpit CMS installation & plug it with Snipcart. 11 | - How to use Nuxt.js static generation to render the frontend of our app. 12 | 13 | The result? A full JAMstack app: headless content management, frontend rendered in a JS framework, & shopping through an e-commerce API. 14 | 15 | >[Read full tutorial](https://snipcart.com/blog/cockpit-cms-tutorial-nuxtjs) 16 | 17 | >[See live demo](https://snipcart-nuxtjs-getcockpit.netlify.com/) 18 | 19 | Enjoy folks! 20 | 21 | *** 22 | 23 | ## Build Setup 24 | 25 | ``` bash 26 | # install dependencies 27 | $ npm install # Or yarn install 28 | 29 | # serve with hot reload at localhost:3000 30 | $ npm run dev 31 | 32 | # build for production and launch server 33 | $ npm run build 34 | $ npm start 35 | 36 | # generate static project 37 | $ npm run generate 38 | ``` 39 | 40 | For detailed explanation on how things work, checkout the [Nuxt.js docs](https://github.com/nuxt/nuxt.js). 41 | -------------------------------------------------------------------------------- /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/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | The components directory contains your Vue.js Components. 4 | Nuxt.js doesn't supercharge these components. 5 | 6 | **This directory is not required, you can delete it if you don't want to use it.** 7 | -------------------------------------------------------------------------------- /components/SmallProduct.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 43 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 28 | 29 | 33 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | /* 3 | ** Headers of the page 4 | */ 5 | head: { 6 | title: 'snipcart-nuxt', 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 | { rel: 'stylesheet', href:'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'}, 15 | { rel: 'stylesheet', href:'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.min.css'}, 16 | { rel: 'stylesheet', href:'https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css'} 17 | ] 18 | }, 19 | /* 20 | ** Customize the progress-bar color 21 | */ 22 | loading: { color: '#3B8070' }, 23 | env: { 24 | cockpit: { 25 | apiUrl: 'https://snipcart-getcockpit.azurewebsites.net/index.php/rest/api', 26 | apiToken: '6c94c9ef3ec3d868df28665d', 27 | baseUrl: 'https://snipcart-getcockpit.azurewebsites.net' 28 | } 29 | }, 30 | /* 31 | ** Build configuration 32 | */ 33 | build: { 34 | vendor: ['axios'], 35 | /* 36 | ** Run ESLINT on save 37 | */ 38 | extend (config, ctx) { 39 | if (ctx.dev && ctx.isClient) { 40 | config.module.rules.push({ 41 | enforce: 'pre', 42 | test: /\.(js|vue)$/, 43 | loader: 'eslint-loader', 44 | exclude: /(node_modules)/ 45 | }) 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snipcart-nuxt", 3 | "version": "1.0.0", 4 | "description": "Nuxt e-commerce powered by Getcockpit CMS and Snipcart.", 5 | "author": "Charles Ouellet ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "nuxt build", 10 | "start": "nuxt start", 11 | "generate": "nuxt generate", 12 | "lint": "eslint --ext .js,.vue --ignore-path .gitignore .", 13 | "precommit": "npm run lint" 14 | }, 15 | "dependencies": { 16 | "axios": "^0.16.2", 17 | "less-loader": "^4.0.5", 18 | "nuxt": "^1.0.0-rc3", 19 | "pug": "^2.0.0-rc.3" 20 | }, 21 | "devDependencies": { 22 | "babel-eslint": "^7.2.3", 23 | "eslint": "^4.3.0", 24 | "eslint-config-standard": "^10.2.1", 25 | "eslint-loader": "^1.9.0", 26 | "eslint-plugin-html": "^3.1.1", 27 | "eslint-plugin-import": "^2.7.0", 28 | "eslint-plugin-node": "^5.1.1", 29 | "eslint-plugin-promise": "^3.5.0", 30 | "eslint-plugin-standard": "^3.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /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 create 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 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 39 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snipcart/nuxt-cockpit/c58975cf565740ac196a689f27c63c323853caff/static/favicon.ico -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------