├── .editorconfig ├── .gitignore ├── README.md ├── apollo └── queries │ └── product │ ├── product.gql │ └── products.gql ├── assets ├── README.md └── css │ └── tailwind.css ├── components ├── footer.vue ├── icons │ ├── cart.vue │ ├── facebook.vue │ ├── github.vue │ └── twitter.vue └── navbar.vue ├── layouts ├── README.md └── default.vue ├── middleware └── README.md ├── nuxt.config.js ├── package-lock.json ├── package.json ├── pages ├── README.md ├── index.vue └── products │ └── _id │ └── index.vue ├── plugins └── README.md ├── static ├── README.md └── favicon.ico ├── store └── README.md ├── tailwind.config.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 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 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | /logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE / Editor 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | 86 | # macOS 87 | .DS_Store 88 | 89 | # Vim swap files 90 | *.swp 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Strapi & Nuxt e-commerce app using Snipcart 2 | 3 | ![strapi-nuxt-ecommerce](https://snipcart.com/media/204926/strapi-nuxt-ecommerce.png) 4 | 5 | Here's how to bind Nuxt to Strapi and use Snipcart to craft a neat e-commerce app. 6 | 7 | Tutorial steps: 8 | 9 | - Generating a Strapi app & creating products 10 | - Consuming products with Nuxt.js 11 | - Adding e-commerce functionalities with Snipcart 12 | - Handling custom fields in the cart 13 | - Integrating a GraphQL plugin 14 | - Deploying the Strapi & Nuxt e-commerce app 15 | 16 | > Read the complete tutorial [here](https://snipcart.com/blog/strapi-nuxt-ecommerce-tutorial) 17 | 18 | > Try the live demo [here](https://strapi-nuxt-snipcart.netlify.app/) 19 | 20 | > See the starter [here](https://strapi.io/blog/strapi-starter-nuxt-js-e-commerce) 21 | 22 | Happy coding folks! 23 | -------------------------------------------------------------------------------- /apollo/queries/product/product.gql: -------------------------------------------------------------------------------- 1 | query Products($id: ID!) { 2 | product(id: $id) { 3 | id 4 | title 5 | image 6 | description, 7 | price, 8 | Custom_field { 9 | title 10 | required, 11 | options 12 | } 13 | } 14 | } -------------------------------------------------------------------------------- /apollo/queries/product/products.gql: -------------------------------------------------------------------------------- 1 | query Products { 2 | products { 3 | id 4 | title 5 | image 6 | description 7 | } 8 | } -------------------------------------------------------------------------------- /assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /assets/css/tailwind.css: -------------------------------------------------------------------------------- 1 | @import 'tailwindcss/base'; 2 | @import 'tailwindcss/components'; 3 | @import 'tailwindcss/utilities'; 4 | -------------------------------------------------------------------------------- /components/footer.vue: -------------------------------------------------------------------------------- 1 | 17 | 30 | 31 | 36 | -------------------------------------------------------------------------------- /components/icons/cart.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/icons/facebook.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/icons/github.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/icons/twitter.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/navbar.vue: -------------------------------------------------------------------------------- 1 | 15 | 24 | 25 | 30 | -------------------------------------------------------------------------------- /layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). 8 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | 11 | 19 | 75 | -------------------------------------------------------------------------------- /middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your application middleware. 6 | Middleware let you define custom functions that can be run before rendering either a page or a group of pages. 7 | 8 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware). 9 | -------------------------------------------------------------------------------- /nuxt.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | /* 3 | ** Nuxt rendering mode 4 | ** See https://nuxtjs.org/api/configuration-mode 5 | */ 6 | mode: 'universal', 7 | /* 8 | ** Nuxt target 9 | ** See https://nuxtjs.org/api/configuration-target 10 | */ 11 | target: 'static', 12 | /* 13 | ** Headers of the page 14 | ** See https://nuxtjs.org/api/configuration-head 15 | */ 16 | 17 | // 18 | 19 | head: { 20 | title: 'The Cupcake Factory (Nuxt/Strapi/Snipcart)', 21 | meta: [ 22 | { charset: 'utf-8' }, 23 | { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 24 | { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } 25 | ], 26 | link: [ 27 | { rel: 'preconnect', href: "https://app.snipcart.com" }, 28 | { rel: 'preconnect', href: "https://cdn.snipcart.com" }, 29 | { rel: 'stylesheet', href: "https://cdn.snipcart.com/themes/v3.0.16/default/snipcart.css" }, 30 | { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } 31 | ], 32 | script: [ 33 | { src: 'https://cdn.snipcart.com/themes/v3.0.16/default/snipcart.js'} 34 | ] 35 | }, 36 | /* 37 | ** Global CSS 38 | */ 39 | css: [ 40 | ], 41 | /* 42 | ** Plugins to load before mounting the App 43 | ** https://nuxtjs.org/guide/plugins 44 | */ 45 | plugins: [ 46 | ], 47 | /* 48 | ** Auto import components 49 | ** See https://nuxtjs.org/api/configuration-components 50 | */ 51 | components: true, 52 | /* 53 | ** Nuxt.js dev-modules 54 | */ 55 | buildModules: [ 56 | // Doc: https://github.com/nuxt-community/nuxt-tailwindcss 57 | '@nuxtjs/tailwindcss', 58 | ], 59 | /* 60 | ** Nuxt.js modules 61 | */ 62 | modules: [ 63 | '@nuxtjs/apollo' 64 | ], 65 | apollo: { 66 | clientConfigs: { 67 | default: { 68 | httpEndpoint: process.env.BACKEND_URL || "http://localhost:1337/graphql" 69 | } 70 | } 71 | }, 72 | env: { 73 | storeUrl: process.env.STORE_URL ||"http://localhost:1337" 74 | }, 75 | /* 76 | ** Build configuration 77 | ** See https://nuxtjs.org/api/configuration-build/ 78 | */ 79 | build: { 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-strapi-snipcart", 3 | "version": "1.0.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "nuxt", 7 | "build": "nuxt build", 8 | "start": "nuxt start", 9 | "export": "nuxt export", 10 | "serve": "nuxt serve", 11 | "generate": "nuxt build && nuxt export" 12 | }, 13 | "dependencies": { 14 | "@nuxtjs/apollo": "^4.0.1-rc.1", 15 | "apollo-cache-inmemory": "^1.6.6", 16 | "core-js": "^2.6.5", 17 | "graphql": "^15.3.0", 18 | "nuxt": "^2.13.0" 19 | }, 20 | "devDependencies": { 21 | "@nuxtjs/tailwindcss": "^2.0.0" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 36 | 37 | 43 | -------------------------------------------------------------------------------- /pages/products/_id/index.vue: -------------------------------------------------------------------------------- 1 | 30 | 31 | 62 | 63 | 65 | -------------------------------------------------------------------------------- /plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /static/README.md: -------------------------------------------------------------------------------- 1 | # STATIC 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your static files. 6 | Each file inside this directory is mapped to `/`. 7 | Thus you'd want to delete this README.md before deploying to production. 8 | 9 | Example: `/static/robots.txt` is mapped as `/robots.txt`. 10 | 11 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static). 12 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/snipcart/strapi-nuxt/de173355420ab43af86ea62216a30c88c48442f1/static/favicon.ico -------------------------------------------------------------------------------- /store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains your Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /* 2 | ** TailwindCSS Configuration File 3 | ** 4 | ** Docs: https://tailwindcss.com/docs/configuration 5 | ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js 6 | */ 7 | module.exports = { 8 | theme: {}, 9 | variants: {}, 10 | plugins: [], 11 | purge: { 12 | // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css 13 | enabled: process.env.NODE_ENV === 'production', 14 | content: [ 15 | 'components/**/*.vue', 16 | 'layouts/**/*.vue', 17 | 'pages/**/*.vue', 18 | 'plugins/**/*.js', 19 | 'nuxt.config.js' 20 | ] 21 | } 22 | } 23 | --------------------------------------------------------------------------------