├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── README.md
├── assets
    └── README.md
├── components
    ├── Ads.vue
    ├── Featured.vue
    ├── Footer.vue
    ├── HeroSection.vue
    ├── Logo.vue
    ├── Nav.vue
    ├── NewsLetter.vue
    ├── Products.vue
    └── README.md
├── layouts
    ├── README.md
    └── default.vue
├── middleware
    └── README.md
├── nuxt.config.js
├── package.json
├── pages
    ├── README.md
    ├── all.vue
    ├── cart.vue
    ├── index.vue
    ├── men.vue
    ├── products
    │   └── _products.vue
    └── women.vue
├── plugins
    ├── README.md
    └── vue-swal.js
├── procfile
├── static
    ├── README.md
    ├── Repeat_Grid_2.png
    ├── favicon.ico
    ├── icon.png
    └── uriel-soberanes-MxVkWPiJALs-unsplash-removebg-preview.png
├── store
    ├── README.md
    └── index.js
├── 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 | 


--------------------------------------------------------------------------------
/.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 |     '@nuxtjs',
12 |     'prettier',
13 |     'prettier/vue',
14 |     'plugin:prettier/recommended',
15 |     'plugin:nuxt/recommended',
16 |   ],
17 |   plugins: ['prettier'],
18 |   // add your custom rules here
19 |   rules: {},
20 | }
21 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # e-commerce
 2 | 
 3 | ## Build Setup
 4 | 
 5 | ```bash
 6 | # install dependencies
 7 | $ yarn install
 8 | 
 9 | # serve with hot reload at localhost:3000
10 | $ yarn dev
11 | 
12 | # build for production and launch server
13 | $ yarn build
14 | $ yarn start
15 | 
16 | # generate static project
17 | $ yarn generate
18 | ```
19 | 
20 | For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/components/Ads.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="bg-primary ads flex justify-center items-center">
 3 |     <h3 class="text-white text-lg ml-6 sm:text-2xl font-bold">
 4 |       50% off on all Purchases Above $300, Hurry Now!!!!
 5 |     </h3>
 6 |     <img
 7 |       class="h-48 sm:pl-20"
 8 |       :src="`uriel-soberanes-MxVkWPiJALs-unsplash-removebg-preview.png`"
 9 |       alt=""
10 |     />
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'Ads',
17 | }
18 | </script>
19 | 
20 | <style scpoed></style>
21 | 


--------------------------------------------------------------------------------
/components/Featured.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="sm:grid sm:grid-cols-3 md:grid-cols-3 gap-6 justify-center items-center"
 5 |     >
 6 |       <div
 7 |         v-for="(product, i) in data"
 8 |         :key="i"
 9 |         class="flex flex-col max-h-screen shadow-xl m-8 sm:m-2 md:m-4 justify-center items-center"
10 |       >
11 |         <div class="img-wrapper h-3/4 mx-auto max-h-screen">
12 |           <img
13 |             class="flex-shrink h-1/2"
14 |             :src="`${product.Image[0].url}`"
15 |             alt=""
16 |           />
17 |         </div>
18 | 
19 |         <div>
20 |           <p class="text-center m-3">
21 |             {{ product.name }}
22 |           </p>
23 | 
24 |           <NuxtLink :to="`/products/${product.id}`">
25 |             <button class="button--green mb-4">View Product</button>
26 |           </NuxtLink>
27 |         </div>
28 |       </div>
29 |     </div>
30 |   </div>
31 | </template>
32 | 
33 | <script>
34 | // import axios from '@nuxtjs/axios'
35 | export default {
36 |   name: 'Featured',
37 |   props: ['data'],
38 | }
39 | </script>
40 | 
41 | <style scoped>
42 | /* img {
43 |   height: 12em;
44 | } */
45 | </style>
46 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="flex flex-col mt-10 sm:mt-0 sm:flex-row sm:items-center bg-primary text-white space-x-5 p-5 py-8 md:space-x-20 md:p-20 font-light text-sm"
 4 |   >
 5 |     <p class="ml-5 font-bold">Unique Essense Store</p>
 6 |     <div class="m-2 mb-3">
 7 |       <NuxtLink to="/" class="m-2"><p>Home</p></NuxtLink>
 8 |       <NuxtLink to="/all" class="m-2"><p>All</p></NuxtLink>
 9 |       <NuxtLink to="men" class="m-2"><p>Men</p></NuxtLink>
10 |       <NuxtLink to="women" class="m-2"><p>Women</p></NuxtLink>
11 |     </div>
12 | 
13 |     <p>
14 |       Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
15 |       doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
16 |       inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
17 |       Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut
18 |       fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem
19 |       sequi nesciunt
20 |     </p>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: 'Footer',
27 | }
28 | </script>
29 | 
30 | <style scoped></style>
31 | 


--------------------------------------------------------------------------------
/components/HeroSection.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="hero relative max-h-screen flex flex-col justify-center items-center text-center mx-auto bg-cover"
 4 |   >
 5 |     <div class="relative m-10 md:m-20">
 6 |       <div class="relative">
 7 |         <img class="absolute left-0 top-0" src="Repeat_Grid_2.png" alt="" />
 8 |       </div>
 9 |       <div class="z-10 relative">
10 |         <h1 class="text-5xl text-white m-3 font-bold md:text-6xl">
11 |           Unique Essence Store
12 |         </h1>
13 |         <p class="text-white subtitle">...your one stop shop for all</p>
14 |       </div>
15 |       <div class="circle absolute z-0 right-0 top-0"></div>
16 |       <div class="links mt-10">
17 |         <NuxtLink to="/" class="button--hero bg-button relative z-10">
18 |           View Collections
19 |         </NuxtLink>
20 |       </div>
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   name: 'HeroSection',
28 | }
29 | </script>
30 | 
31 | <style scoped>
32 | /* Sample `apply` at-rules with Tailwind CSS
33 | .container {
34 | @apply min-h-screen flex justify-center items-center text-center mx-auto;
35 | }
36 | */
37 | .hero {
38 |   background-color: #9c7474dc;
39 | }
40 | 
41 | .circle {
42 |   width: 10em;
43 |   height: 10em;
44 |   border-radius: 5em;
45 |   background: #b8738d;
46 | }
47 | 
48 | .title {
49 |   font-family: 'Nunito';
50 |   display: block;
51 |   font-weight: 700;
52 |   font-size: 50px;
53 |   letter-spacing: 1px;
54 |   line-height: 1em;
55 | }
56 | 
57 | .subtitle {
58 |   font-weight: 100;
59 |   word-spacing: 2px;
60 | }
61 | </style>
62 | 


--------------------------------------------------------------------------------
/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <svg
 3 |     class="NuxtLogo"
 4 |     width="245"
 5 |     height="180"
 6 |     viewBox="0 0 452 342"
 7 |     xmlns="http://www.w3.org/2000/svg"
 8 |   >
 9 |     <path
10 |       d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
11 |       fill="#00C58E"
12 |     />
13 |     <path
14 |       d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
15 |       fill="#108775"
16 |     />
17 |     <path
18 |       d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
19 |       fill="#2F495E"
20 |     />
21 |   </svg>
22 | </template>
23 | 
24 | <style>
25 | .NuxtLogo {
26 |   animation: 1s appear;
27 |   margin: auto;
28 | }
29 | 
30 | @keyframes appear {
31 |   0% {
32 |     opacity: 0;
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/components/Nav.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="navbar flex text-white relative">
 3 |     <div class="nav-item-center flex space-x-6 sm:space-x-20 p-5 mx-auto">
 4 |       <NuxtLink to="/">Home</NuxtLink>
 5 |       <NuxtLink to="/all">All</NuxtLink>
 6 |       <NuxtLink to="/men">Men</NuxtLink>
 7 |       <NuxtLink to="/women">Women</NuxtLink>
 8 |     </div>
 9 |     <div class="cart fixed bottom-0 right-0 shadow-md m-3">
10 |       <p class="p-1 cartCount text-xs absolute top-0 right-0">
11 |         {{ getCart.length }}
12 |       </p>
13 |       <NuxtLink to="/cart">
14 |         <p class="pt-3 px-2">Cart</p>
15 |       </NuxtLink>
16 |     </div>
17 |     <!-- <div class="ham-menu shadow-md fixed bottom-0 right-0 m-3 sm:hidden">
18 |       <p class="text-center pt-3">menu</p>
19 |     </div> -->
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import { mapGetters } from 'vuex'
25 | export default {
26 |   name: 'Nav',
27 |   computed: {
28 |     ...mapGetters(['getCart']),
29 |   },
30 | }
31 | </script>
32 | 
33 | <style scoped>
34 | .ham-menu {
35 |   background-color: #000;
36 |   width: 3em;
37 |   height: 3em;
38 |   border-radius: 1.5em;
39 | }
40 | .cart {
41 |   background-color: rgb(163, 87, 129);
42 |   width: 3em;
43 |   height: 3em;
44 |   border-radius: 1.5em;
45 | }
46 | .navbar {
47 |   background-color: rgb(24, 20, 22);
48 | }
49 | .cartCount {
50 |   background: #000;
51 |   border-radius: 30%;
52 | }
53 | </style>
54 | 


--------------------------------------------------------------------------------
/components/NewsLetter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     class="sm:flex mx-auto items-center m-10 justify-center space-x-6 sm:space-x-20 m-3 sm:m-6 mx-6"
 4 |   >
 5 |     <div>
 6 |       <h1 class="text-lg m-7">Sign Up For NewsLetter</h1>
 7 |     </div>
 8 |     <div>
 9 |       <form @submit="handleSuscribe">
10 |         <input
11 |           id=""
12 |           v-model="email"
13 |           class="p-2 m-3 sm:m-0 border border-solid border-t-0 border-l-0 border-r-0 border-b-1 outline-none border-black"
14 |           type="email"
15 |           name=""
16 |           placeholder="email"
17 |         />
18 |         <button type="submit" class="button--grey">Subscribe</button>
19 |       </form>
20 |     </div>
21 |   </div>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   name: 'NewsLetter',
27 |   data() {
28 |     return {
29 |       email: '',
30 |     }
31 |   },
32 |   methods: {
33 |     async handleSuscribe(e) {
34 |       e.preventDefault()
35 |       this.$swal({
36 |         title: 'Successful!',
37 |         text: 'Thanks for Subscribing',
38 |         icon: 'success',
39 |         button: 'Ok',
40 |       })
41 |       await this.$strapi.$subscribers.create({ Email: this.email })
42 |       // clear email input
43 |       this.email = ''
44 |     },
45 |   },
46 | }
47 | </script>
48 | 
49 | <style></style>
50 | 


--------------------------------------------------------------------------------
/components/Products.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div
 4 |       class="sm:grid grid-cols-2 justify-center shadow-lg items-center gap-3 m-5 md:m-5"
 5 |     >
 6 |       <div>
 7 |         <img class="max-h-screen" :src="`${data.Image[0].url}`" />
 8 |       </div>
 9 |       <div class="sm:m-3 md:m-5 p-3 sm:p-0">
10 |         <p class="my-2"><span>Price: </span>{{ data.price | formatPrice }}</p>
11 |         <span class="my-2">Quantity: </span
12 |         ><input
13 |           v-model="cartItem.quantity"
14 |           class="p-3 border border-solid border-t-0 border-l-0 border-r-0 border-b-1"
15 |           type="number"
16 |         />
17 |         <p class="my-2 text-sm">{{ data.description }}</p>
18 |         <button
19 |           class="button--green my-2"
20 |           @click="
21 |             addItemToCart(cartItem)
22 |             displayMessage()
23 |           "
24 |         >
25 |           Add to Cart
26 |         </button>
27 |       </div>
28 |     </div>
29 |   </div>
30 | </template>
31 | 
32 | <script>
33 | import { mapActions } from 'vuex'
34 | export default {
35 |   name: 'Products',
36 |   props: ['data'],
37 |   data() {
38 |     return {
39 |       cartItem: {
40 |         id: this.data.id,
41 |         name: this.data.name,
42 |         url: this.data.Image[0].url,
43 |         price: this.data.price,
44 |         quantity: 1,
45 |       },
46 |     }
47 |   },
48 |   methods: {
49 |     ...mapActions(['addItemToCart']),
50 |     displayMessage() {
51 |       this.$swal({
52 |         title: 'Cart Updated!',
53 |         text: `${this.data.name} was added to your cart!`,
54 |         icon: 'success',
55 |         button: 'Ok',
56 |       })
57 |     },
58 |   },
59 |   filters: {
60 |     formatPrice(price) {
61 |       return `$${price}`
62 |     },
63 |   },
64 | }
65 | </script>
66 | 
67 | <style scoped></style>
68 | 


--------------------------------------------------------------------------------
/components/README.md:
--------------------------------------------------------------------------------
1 | # COMPONENTS
2 | 
3 | **This directory is not required, you can delete it if you don't want to use it.**
4 | 
5 | The components directory contains your Vue.js Components.
6 | 
7 | _Nuxt.js doesn't supercharge these components._
8 | 


--------------------------------------------------------------------------------
/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 | <template>
 2 |   <div>
 3 |     <Nuxt />
 4 |   </div>
 5 | </template>
 6 | 
 7 | <style>
 8 | html {
 9 |   /* font-family: 'Nunito', 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
10 |     Roboto, 'Helvetica Neue', Arial, sans-serif; */
11 |   font-family: 'Nunito';
12 |   font-size: 16px;
13 |   word-spacing: 1px;
14 |   -ms-text-size-adjust: 100%;
15 |   -webkit-text-size-adjust: 100%;
16 |   -moz-osx-font-smoothing: grayscale;
17 |   -webkit-font-smoothing: antialiased;
18 |   box-sizing: border-box;
19 | }
20 | 
21 | *,
22 | *::before,
23 | *::after {
24 |   box-sizing: border-box;
25 |   margin: 0;
26 | }
27 | 
28 | .button--hero {
29 |   display: inline-block;
30 |   color: #fff;
31 |   text-decoration: none;
32 |   padding: 10px 30px;
33 | }
34 | 
35 | .button--green {
36 |   display: inline-block;
37 |   border: 1px solid #3b8070;
38 |   color: #3b8070;
39 |   text-decoration: none;
40 |   padding: 10px 30px;
41 | }
42 | 
43 | .button--green:hover {
44 |   color: #fff;
45 |   background-color: #3b8070;
46 | }
47 | 
48 | .button--grey {
49 |   display: inline-block;
50 |   border: 1px solid #35495e;
51 |   color: #35495e;
52 |   text-decoration: none;
53 |   padding: 10px 30px;
54 |   margin-left: 15px;
55 | }
56 | 
57 | .button--grey:hover {
58 |   color: #fff;
59 |   background-color: #35495e;
60 | }
61 | 
62 | .button--delete {
63 |   display: inline-block;
64 |   border: 1px solid #35495e;
65 |   padding: 5px;
66 |   color: white;
67 |   background-color: #35495e;
68 | }
69 | 
70 | button:focus {
71 |   outline: none;
72 | }
73 | 
74 | .container {
75 |   width: 80%;
76 | }
77 | </style>
78 | 


--------------------------------------------------------------------------------
/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 |   // Global page headers (https://go.nuxtjs.dev/config-head)
 3 |   head: {
 4 |     title: 'e-commerce',
 5 |     meta: [
 6 |       { charset: 'utf-8' },
 7 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
 8 |       { hid: 'description', name: 'description', content: '' },
 9 |     ],
10 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
11 |   },
12 | 
13 |   // Global CSS (https://go.nuxtjs.dev/config-css)
14 |   css: [],
15 | 
16 |   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
17 |   plugins: ['~/plugins/vue-swal'],
18 | 
19 |   // Auto import components (https://go.nuxtjs.dev/config-components)
20 |   components: true,
21 | 
22 |   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
23 |   buildModules: [
24 |     // https://go.nuxtjs.dev/eslint
25 |     '@nuxtjs/eslint-module',
26 |     // https://go.nuxtjs.dev/tailwindcss
27 |     '@nuxtjs/tailwindcss',
28 |     // https://go.nuxtjs.dev/pwa
29 |     '@nuxtjs/pwa',
30 |   ],
31 | 
32 |   // Modules (https://go.nuxtjs.dev/config-modules)
33 |   modules: [
34 |     // https://go.nuxtjs.dev/axios
35 |     '@nuxtjs/axios',
36 |     // https://go.nuxtjs.dev/pwa
37 |     '@nuxtjs/pwa',
38 |     // strapi for nuxt
39 |     '@nuxtjs/strapi',
40 |   ],
41 | 
42 |   strapi: {
43 |     entities: ['products', 'orders', 'subscribers'],
44 |   },
45 |   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
46 |   axios: {},
47 | 
48 |   // Build Configuration (https://go.nuxtjs.dev/config-build)
49 |   build: {
50 |     /*
51 |      ** Run ESLint on save
52 |      */
53 |     extend(config, ctx) {
54 |       if (ctx.dev && ctx.isClient) {
55 |         config.module.rules.push({
56 |           enforce: 'pre',
57 |           test: /\.(js|vue)$/,
58 |           loader: 'eslint-loader',
59 |           exclude: /(node_modules)/,
60 |         })
61 |       }
62 |     },
63 |     /*
64 |      ** Add vue-swal
65 |      */
66 |     vendor: ['vue-swal'],
67 |   },
68 | 
69 |   env: {
70 |     STRAPI_URL: `https://enigmatic-peak-00809.herokuapp.com`,
71 |   },
72 | }
73 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "e-commerce",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt && yarn lint:js --fix",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate",
10 |     "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
11 |     "lint": "yarn lint:js"
12 |   },
13 |   "dependencies": {
14 |     "@nuxtjs/axios": "^5.12.2",
15 |     "@nuxtjs/pwa": "^3.0.2",
16 |     "@nuxtjs/strapi": "^0.1.9",
17 |     "@stripe/stripe-js": "^1.11.0",
18 |     "core-js": "^3.6.5",
19 |     "nuxt": "^2.14.6",
20 |     "vue-swal": "^1.0.0"
21 |   },
22 |   "devDependencies": {
23 |     "@nuxtjs/eslint-config": "^3.1.0",
24 |     "@nuxtjs/eslint-module": "^2.0.0",
25 |     "@nuxtjs/tailwindcss": "^3.1.0",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^7.10.0",
28 |     "eslint-config-prettier": "^6.12.0",
29 |     "eslint-plugin-nuxt": "^1.0.0",
30 |     "eslint-plugin-prettier": "^3.1.4",
31 |     "prettier": "^2.1.2"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/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/all.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nav class="sticky top-0" />
 4 |     <div class="sm:w-11/12 md:w-4/5 mx-auto">
 5 |       <h1 class="m-5 font-bold text-lg">Our Collection</h1>
 6 |       <div class="flex justify-center text-center mx-auto">
 7 |         <Featured :data="allProducts" />
 8 |       </div>
 9 |     </div>
10 |     <Ads class="mx-auto sm:m-10" />
11 |     <Footer />
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapGetters } from 'vuex'
17 | 
18 | export default {
19 |   async asyncData({ $strapi, store, error }) {
20 |     try {
21 |       const response = await $strapi.$products.find()
22 |       store.commit('setProducts', response)
23 |     } catch (e) {
24 |       error(e)
25 |     }
26 |   },
27 |   data() {
28 |     return {
29 |       products: [],
30 |     }
31 |   },
32 |   computed: {
33 |     ...mapGetters(['allProducts']),
34 |   },
35 | }
36 | </script>
37 | 
38 | <style scoped></style>
39 | 


--------------------------------------------------------------------------------
/pages/cart.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <Nav class="sticky top-0" />
  4 |     <div class="w-4/5 sm:w-1/2 mx-auto">
  5 |       <h1 class="m-5 font-bold text-lg">Your Cart</h1>
  6 |     </div>
  7 |     <div
  8 |       v-for="item in getCart"
  9 |       :key="item.id"
 10 |       class="w-4/5 sm:w-1/2 flex items-center space-x-3 mx-auto shadow-lg m-5 p-3"
 11 |     >
 12 |       <div>
 13 |         <img class="h-24" :src="`${item.url}`" alt="" />
 14 |       </div>
 15 |       <div>
 16 |         <p>
 17 |           {{ item.name }}
 18 |         </p>
 19 |         <p>
 20 |           {{ item.quantity | formatQuantity }}
 21 |         </p>
 22 |         <button class="button--delete" @click="deleteCartItem(item.id)">
 23 |           Delete
 24 |         </button>
 25 |       </div>
 26 |     </div>
 27 |     <div class="w-4/5 sm:w-1/2 mb-2 mx-auto">
 28 |       <p>
 29 |         <span>Total: </span> {{ formatCartTotal(getCartTotal) | formatPrice }}
 30 |       </p>
 31 |       <button
 32 |         v-show="getCartTotal > 0"
 33 |         class="button--green mx-auto"
 34 |         @click="handleSubmit"
 35 |       >
 36 |         checkout
 37 |       </button>
 38 |     </div>
 39 |     <Ads class="mx-auto sm:m-10" />
 40 |     <Footer />
 41 |   </div>
 42 | </template>
 43 | 
 44 | <script>
 45 | import { mapGetters, mapActions } from 'vuex'
 46 | import { loadStripe } from '@stripe/stripe-js'
 47 | export default {
 48 |   data() {
 49 |     return {
 50 |       dataItems: {},
 51 |       session: {},
 52 |       stripe: {},
 53 |       stripePromise: {},
 54 |     }
 55 |   },
 56 |   computed: {
 57 |     ...mapGetters(['getCart', 'getCartTotal']),
 58 |   },
 59 |   mounted() {
 60 |     this.displayMessage()
 61 |   },
 62 |   methods: {
 63 |     async handleSubmit(e) {
 64 |       //   console.log(JSON.stringify(this.dataItems))
 65 |       e.preventDefault()
 66 |       const response = await this.$http.$post(
 67 |         `https://enigmatic-peak-00809.herokuapp.com/orders`,
 68 |         {
 69 |           cartDetail: this.getCart,
 70 |           cartTotal: this.getCartTotal.toFixed(2),
 71 |         }
 72 |       )
 73 |       this.$swal({
 74 |         title: 'Please wait',
 75 |         text: 'redirecting you to stripe, click ok',
 76 |         icon: 'success',
 77 |         button: 'Ok',
 78 |       })
 79 |       // stripe logic
 80 |       const stripePromise = loadStripe(
 81 |         PROCESS.env.STRIPE_KEY
 82 |       )
 83 |       const session = response
 84 |       const stripe = await stripePromise
 85 |       const result = await stripe.redirectToCheckout({
 86 |         sessionId: session.id,
 87 |       })
 88 |       console.log(response)
 89 |       if (result.error) {
 90 |         this.$nuxt.context.error(result.error.message)
 91 |       }
 92 |     },
 93 |     // using vue-swal to display messages
 94 |     displayMessage() {
 95 |       if (this.$route.query.success) {
 96 |         this.$swal({
 97 |           title: 'Order placed!',
 98 |           text: 'Thanks for placing your orders',
 99 |           icon: 'success',
100 |           button: 'Ok',
101 |         })
102 |       } else if (this.$route.query.canceled) {
103 |         this.$swal({
104 |           title: 'Order canceled!',
105 |           text: "continue to shop around and checkout when you're ready.",
106 |           icon: 'warning',
107 |           button: 'Ok',
108 |         })
109 |       }
110 |     },
111 |     formatCartTotal(num) {
112 |       if (num > 0) {
113 |         return num.toFixed(2)
114 |       } else {
115 |         return num
116 |       }
117 |     },
118 |     ...mapActions(['deleteCartItem']),
119 |   },
120 |   filters: {
121 |     formatPrice(price) {
122 |       return `$${price}`
123 |     },
124 |     formatQuantity(num) {
125 |       const qtyNum = num === 1 ? `${num} unit` : `${num} units`
126 |       return qtyNum
127 |     },
128 |   },
129 | }
130 | </script>
131 | 
132 | <style scoped></style>
133 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <HeroSection />
 4 |     <Nav class="sticky top-0" />
 5 |     <div class="sm:w-11/12 md:w-4/5 mx-auto">
 6 |       <h1 class="m-5 font-bold text-lg">Featured Products</h1>
 7 |       <Featured class="mx-auto" :data="featuredProducts" />
 8 |     </div>
 9 |     <Ads class="mx-auto sm:m-10" />
10 |     <NewsLetter class="mx-auto" />
11 |     <Footer />
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapGetters } from 'vuex'
17 | export default {
18 |   async asyncData({ $strapi, store, error }) {
19 |     try {
20 |       const response = await $strapi.$products.find({ featured: true })
21 |       store.commit('setFeaturedProducts', response)
22 |     } catch (e) {
23 |       error(e)
24 |     }
25 |   },
26 |   data() {
27 |     return {
28 |       featuredProds: [],
29 |     }
30 |   },
31 |   computed: {
32 |     ...mapGetters(['featuredProducts']),
33 |   },
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | /* Sample `apply` at-rules with Tailwind CSS
39 | .container {
40 | @apply min-h-screen flex justify-center items-center text-center mx-auto;
41 | }
42 | */
43 | </style>
44 | 


--------------------------------------------------------------------------------
/pages/men.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nav class="sticky top-0" />
 4 |     <div class="md:w-4/5 sm:w-11/12 mx-auto">
 5 |       <h1 class="m-5 font-bold text-lg">Men's Collection</h1>
 6 |       <div class="flex justify-center text-center mx-auto">
 7 |         <Featured :data="menProducts" />
 8 |       </div>
 9 |     </div>
10 |     <Ads class="mx-auto sm:m-10" />
11 |     <Footer />
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapGetters } from 'vuex'
17 | 
18 | export default {
19 |   async asyncData({ $strapi, store, error }) {
20 |     try {
21 |       const response = await $strapi.$products.find([['category.name', 'men']])
22 |       store.commit('setMenProducts', response)
23 |     } catch (e) {
24 |       error(e)
25 |     }
26 |   },
27 |   data() {
28 |     return {
29 |       menProds: [],
30 |     }
31 |   },
32 |   computed: {
33 |     ...mapGetters(['menProducts']),
34 |   },
35 | }
36 | </script>
37 | 
38 | <style scoped></style>
39 | 


--------------------------------------------------------------------------------
/pages/products/_products.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nav class="sticky top-0" />
 4 |     <h1 class="font-bold m-5 md:mx-10">
 5 |       {{ currentProduct.name }}
 6 |     </h1>
 7 |     <Products :data="currentProduct" />
 8 |     <Ads class="mx-auto sm:m-10" />
 9 |     <Footer />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | export default {
15 |   async asyncData({ $strapi, route }) {
16 |     const id = route.params.products
17 |     const currentProduct = await $strapi.$products.findOne(id)
18 |     return { currentProduct }
19 |   },
20 |   data() {
21 |     return {
22 |       currentProduct: {},
23 |     }
24 |   },
25 | }
26 | </script>
27 | 
28 | <style scoped></style>
29 | 


--------------------------------------------------------------------------------
/pages/women.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Nav class="sticky top-0" />
 4 |     <div class="sm:w-11/12 md:w-4/5 mx-auto">
 5 |       <h1 class="m-5 font-bold text-lg">Women's Collection</h1>
 6 |       <div class="flex justify-center text-center mx-auto">
 7 |         <Featured :data="womenProducts" />
 8 |       </div>
 9 |     </div>
10 |     <Ads class="mx-auto sm:m-10" />
11 |     <Footer />
12 |   </div>
13 | </template>
14 | 
15 | <script>
16 | import { mapGetters } from 'vuex'
17 | 
18 | export default {
19 |   async asyncData({ $strapi, store, error }) {
20 |     try {
21 |       const response = await $strapi.$products.find([
22 |         ['category.name', 'women'],
23 |       ])
24 |       store.commit('setWomenProducts', response)
25 |     } catch (e) {
26 |       error(e)
27 |     }
28 |   },
29 |   data() {
30 |     return {
31 |       womenProds: [],
32 |     }
33 |   },
34 |   computed: {
35 |     ...mapGetters(['womenProducts']),
36 |   },
37 | }
38 | </script>
39 | 
40 | <style scoped></style>
41 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/plugins/vue-swal.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import VueSwal from 'vue-swal'
3 | 
4 | Vue.use(VueSwal)
5 | 


--------------------------------------------------------------------------------
/procfile:
--------------------------------------------------------------------------------
1 | web: nuxt start


--------------------------------------------------------------------------------
/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/Repeat_Grid_2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oviecodes/nuxt-ecommerce/4a5b16d40c54fe4cbe0f1e2d175ed8f6bf18c7af/static/Repeat_Grid_2.png


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oviecodes/nuxt-ecommerce/4a5b16d40c54fe4cbe0f1e2d175ed8f6bf18c7af/static/favicon.ico


--------------------------------------------------------------------------------
/static/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oviecodes/nuxt-ecommerce/4a5b16d40c54fe4cbe0f1e2d175ed8f6bf18c7af/static/icon.png


--------------------------------------------------------------------------------
/static/uriel-soberanes-MxVkWPiJALs-unsplash-removebg-preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/oviecodes/nuxt-ecommerce/4a5b16d40c54fe4cbe0f1e2d175ed8f6bf18c7af/static/uriel-soberanes-MxVkWPiJALs-unsplash-removebg-preview.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   allProducts: [],
 3 |   featuredProducts: [],
 4 |   menProducts: [],
 5 |   womenProducts: [],
 6 |   cartItems: [],
 7 | })
 8 | 
 9 | export const getters = {
10 |   /* 
11 |     return items from store
12 |   */
13 |   allProducts: (state) => state.allProducts,
14 |   featuredProducts: (state) => state.featuredProducts,
15 |   menProducts: (state) => state.menProducts,
16 |   womenProducts: (state) => state.womenProducts,
17 |   getCart: (state) => state.cartItems,
18 |   getCartTotal: (state) =>
19 |     state.cartItems.length < 1
20 |       ? '0'
21 |       : state.cartItems
22 |           .map((el) => el.price * el.quantity)
23 |           .reduce((a, b) => a + b),
24 | }
25 | 
26 | export const actions = {
27 |   async addItemToCart({ commit }, cartItem) {
28 |     await commit('setCartItem', cartItem)
29 |   },
30 |   async deleteCartItem({ commit }, id) {
31 |     await commit('removeCartItem', id)
32 |   },
33 | }
34 | 
35 | export const mutations = {
36 |   setProducts: (state, products) => (state.allProducts = products),
37 |   setFeaturedProducts: (state, products) => (state.featuredProducts = products),
38 |   setMenProducts: (state, products) => (state.menProducts = products),
39 |   setWomenProducts: (state, products) => (state.womenProducts = products),
40 |   setCartItem: (state, item) => state.cartItems.push(item),
41 |   removeCartItem: (state, id) =>
42 |     state.cartItems.splice(
43 |       state.cartItems.findIndex((el) => el.id === id),
44 |       1
45 |     ),
46 | }
47 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   theme: {
 3 |     backgroundColor: (theme) => ({
 4 |       ...theme('colors'),
 5 |       primary: '#9c7474',
 6 |       button: '#bec1a6',
 7 |     }),
 8 |   },
 9 | }
10 | 


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