├── .gitignore
├── README.md
├── anything.vue
├── assets
    └── css
    │   └── tailwind.css
├── components
    ├── Counter.vue
    ├── Home
    │   └── HomeWelcome.vue
    └── Navbar.vue
├── composables
    └── states.js
├── layouts
    ├── default.vue
    └── sidebar.vue
├── middleware
    ├── auth.js
    └── page-visit.global.js
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── about.vue
    ├── index.vue
    ├── iphone
    │   ├── index.vue
    │   └── iphone-[name].vue
    ├── login.vue
    └── profile.vue
├── public
    ├── images
    │   ├── iphone-12-pro.webp
    │   ├── iphone-12.webp
    │   ├── iphone-13-pro.webp
    │   └── iphone-13.webp
    └── robots.txt
├── server
    ├── api
    │   └── iphones.ts
    └── routes
    │   └── iphones.ts
├── tailwind.config.js
└── tsconfig.json


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log*
3 | .nuxt
4 | .nitro
5 | .cache
6 | .output
7 | .env
8 | dist
9 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Nuxt course 2022


--------------------------------------------------------------------------------
/anything.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <a href="#" @click="view('home')">Home</a>
 3 |   <a href="#" @click="view('counter')">Counter</a>
 4 | 
 5 |   <NuxtPage />
 6 | 
 7 |   <LazyHomeWelcome v-if="page === 'home'" />
 8 |   <LazyCounter v-if="page === 'counter'" />
 9 | </template>
10 | 
11 | <script setup>
12 | const page = ref("home");
13 | 
14 | function view(name) {
15 |   page.value = name;
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/assets/css/tailwind.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button @click="increment">Increment</button>
 3 |   <p>{{ count }}</p>
 4 |   <button @click="decrement">Decrement</button>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | const count = ref(0);
 9 | 
10 | function increment() {
11 |   count.value++;
12 | }
13 | 
14 | function decrement() {
15 |   count.value--;
16 | }
17 | </script>
18 | 


--------------------------------------------------------------------------------
/components/Home/HomeWelcome.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>Hello World</div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/components/Navbar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav
 3 |     class="bg-purple-900 shadow-lg p-3 text-white text-lg flex justify-between"
 4 |   >
 5 |     <div class="flex">
 6 |       <NuxtLink class="mr-4" to="/">Home</NuxtLink>
 7 |       <NuxtLink class="mr-4" to="/iphone">Iphones</NuxtLink>
 8 |       <p class="mr-4">Cart ({{ cart.length }})</p>
 9 |       <p>Total Route Changed : {{ pageVisitCount }}</p>
10 |     </div>
11 | 
12 |     <div v-if="auth.isAuthenticated">
13 |       <NuxtLink to="/profile">Profile</NuxtLink>
14 |       <button class="ml-4" @click="logout">Logout</button>
15 |     </div>
16 |     <NuxtLink v-else to="/login">Login</NuxtLink>
17 |   </nav>
18 | </template>
19 | 
20 | <script setup>
21 | const cart = useCart();
22 | const auth = useAuth();
23 | const pageVisitCount = ref(0);
24 | 
25 | onMounted(() => {
26 |   pageVisitCount.value = usePageVisitCount();
27 | });
28 | 
29 | function logout() {
30 |   auth.value.isAuthenticated = false;
31 | }
32 | </script>
33 | 


--------------------------------------------------------------------------------
/composables/states.js:
--------------------------------------------------------------------------------
1 | export const useCart = () => useState(() => []);
2 | export const useAuth = () =>
3 |   useState(() => ({
4 |     isAuthenticated: false,
5 |   }));
6 | 
7 | export const usePageVisitCount = () => useState(() => 0);
8 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <Navbar />
4 |     <!-- here nuxt will replace page content -->
5 |     <slot></slot>
6 |   </div>
7 | </template>
8 | 


--------------------------------------------------------------------------------
/layouts/sidebar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <main class="user-layout bg-gray-100">
 3 |     <article class="sidebar">
 4 |       <p>Dashboard</p>
 5 |       <p>Settings</p>
 6 |     </article>
 7 | 
 8 |     <section>
 9 |       <!-- here nuxt will replace page content -->
10 |       <slot></slot>
11 |     </section>
12 |   </main>
13 | </template>
14 | 
15 | <style>
16 | .sidebar {
17 |   display: flex;
18 |   flex-direction: column;
19 | }
20 | .user-layout {
21 |   display: flex;
22 | }
23 | </style>
24 | 


--------------------------------------------------------------------------------
/middleware/auth.js:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware(() => {
2 |   const auth = useAuth();
3 |   return auth.value.isAuthenticated;
4 | });
5 | 


--------------------------------------------------------------------------------
/middleware/page-visit.global.js:
--------------------------------------------------------------------------------
1 | export default defineNuxtRouteMiddleware(() => {
2 |   const pageVisitCount = usePageVisitCount();
3 |   pageVisitCount.value++;
4 | });
5 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from "nuxt";
 2 | 
 3 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 4 | export default defineNuxtConfig({
 5 |   css: ["assets/css/tailwind.css"],
 6 |   meta: {
 7 |     title: "Nuxt3 course",
 8 |   },
 9 |   build: {
10 |     postcss: {
11 |       postcssOptions: {
12 |         plugins: {
13 |           tailwindcss: {},
14 |           autoprefixer: {},
15 |         },
16 |       },
17 |     },
18 |   },
19 | });
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "build": "nuxt build",
 5 |     "dev": "nuxt dev",
 6 |     "generate": "nuxt generate",
 7 |     "preview": "nuxt preview",
 8 |     "postinstall": "nuxt prepare"
 9 |   },
10 |   "devDependencies": {
11 |     "@nuxt/postcss8": "^1.1.3",
12 |     "autoprefixer": "^10.4.8",
13 |     "nuxt": "3.0.0-rc.8",
14 |     "postcss": "^8.4.16",
15 |     "tailwindcss": "^3.1.8"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>Hello About</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | definePageMeta({
 7 |   layout: false,
 8 |   title: "About",
 9 | });
10 | </script>
11 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex">
 3 |     <div class="m-auto mt-52">
 4 |       <h1 class="text-6xl">Welcome to Nuxt3 course</h1>
 5 |     </div>
 6 |   </div>
 7 | </template>
 8 | 
 9 | <script setup></script>
10 | 


--------------------------------------------------------------------------------
/pages/iphone/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="grid grid-cols-4 gap-4 mt-10">
 3 |     <nuxt-link
 4 |       v-for="iphone in iphones"
 5 |       :key="iphone"
 6 |       :to="`/iphone/${iphone}`"
 7 |       class="shadow-lg border rounded-lg text-center"
 8 |     >
 9 |       <h1>{{ iphone }}</h1>
10 |       <div class="flex justify-center">
11 |         <img width="200" :src="`/images/${iphone}.webp`" alt="" />
12 |       </div>
13 |     </nuxt-link>
14 |   </div>
15 | </template>
16 | 
17 | <script setup>
18 | useHead({
19 |   title: "Nuxt3 - Iphones",
20 | });
21 | 
22 | const iphones = ["iphone-12", "iphone-12-pro", "iphone-13", "iphone-13-pro"];
23 | 
24 | // const { data } = useFetch("/iphones");
25 | // const iphones = data;
26 | </script>
27 | 


--------------------------------------------------------------------------------
/pages/iphone/iphone-[name].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <Head>
 4 |       <Title>Nuxt 3 - Iphone {{ name }}</Title>
 5 |     </Head>
 6 |     <div class="flex justify-center w-full mt-20">
 7 |       <div class="grid grid-cols-2">
 8 |         <div>
 9 |           <img :src="`/images/iphone-${route.params.name}.webp`" />
10 |         </div>
11 |         <div class="text-center">
12 |           <h1 class="text-3xl">Iphone {{ name }}</h1>
13 |           <button
14 |             @click="addToCart"
15 |             class="p-3 bg-indigo-900 text-white rounded-md mt-5 w-48"
16 |           >
17 |             <span v-if="isInCart()">Remove from Cart </span>
18 |             <span v-else>Buy Now </span>
19 |           </button>
20 |         </div>
21 |       </div>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script setup>
27 | const route = useRoute();
28 | const name = computed(() => {
29 |   return route.params.name.replaceAll("-", " ");
30 | });
31 | 
32 | const fullname = computed(() => {
33 |   return `iphone-${route.params.name}`;
34 | });
35 | 
36 | const cart = useCart();
37 | 
38 | function isInCart() {
39 |   return !!cart.value.find((ct) => ct.name === fullname.value);
40 | }
41 | 
42 | function addToCart() {
43 |   if (!isInCart()) {
44 |     cart.value.push({ name: fullname });
45 |   } else {
46 |     cart.value = cart.value.filter((ct) => ct.name !== fullname.value);
47 |   }
48 | }
49 | 
50 | // useHead({
51 | //   title: `Nuxt3 - Iphone ${route.params.name}`,
52 | // });
53 | </script>
54 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="flex h-screen w-full">
 3 |     <div class="m-auto">
 4 |       <section class="h-screen">
 5 |         <div class="container px-6 py-12 h-full">
 6 |           <div
 7 |             class="flex justify-center items-center flex-wrap h-full g-6 text-gray-800"
 8 |           >
 9 |             <div class="md:w-8/12 lg:w-6/12 mb-12 md:mb-0">
10 |               <img
11 |                 src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.svg"
12 |                 class="w-full"
13 |                 alt="Phone image"
14 |               />
15 |             </div>
16 |             <div class="md:w-8/12 lg:w-5/12 lg:ml-20">
17 |               <div v-if="_error">
18 |                 <p class="bg-red-500 text-red-200 text-sm p-3 mb-5">
19 |                   {{ _error }}
20 |                 </p>
21 |               </div>
22 |               <form @submit.prevent="onSubmit">
23 |                 <!-- Email input -->
24 |                 <div class="mb-6">
25 |                   <input
26 |                     type="text"
27 |                     class="form-control block w-full px-4 py-2 text-xl font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
28 |                     placeholder="Email address"
29 |                     v-model="form.email"
30 |                   />
31 |                 </div>
32 | 
33 |                 <!-- Password input -->
34 |                 <div class="mb-6">
35 |                   <input
36 |                     type="password"
37 |                     class="form-control block w-full px-4 py-2 text-xl font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
38 |                     placeholder="Password"
39 |                     v-model="form.password"
40 |                   />
41 |                 </div>
42 | 
43 |                 <!-- Submit button -->
44 |                 <button
45 |                   type="submit"
46 |                   class="inline-block px-7 py-3 bg-blue-600 text-white font-medium text-sm leading-snug uppercase rounded shadow-md hover:bg-blue-700 hover:shadow-lg focus:bg-blue-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-blue-800 active:shadow-lg transition duration-150 ease-in-out w-full"
47 |                   data-mdb-ripple="true"
48 |                   data-mdb-ripple-color="light"
49 |                 >
50 |                   <span v-if="isLoading">Loading...</span>
51 |                   <span v-else>Sign in</span>
52 |                 </button>
53 |               </form>
54 |             </div>
55 |           </div>
56 |         </div>
57 |       </section>
58 |     </div>
59 |   </div>
60 | </template>
61 | 
62 | <script setup>
63 | const url = "https://reqres.in/api/login";
64 | 
65 | const isLoading = ref(false);
66 | const _error = ref(null);
67 | 
68 | const form = reactive({
69 |   email: "eve.holt@reqres.in",
70 |   password: "cityslicka",
71 | });
72 | 
73 | async function onSubmit() {
74 |   if (isLoading.value) return;
75 | 
76 |   isLoading.value = true;
77 |   const { data, error } = await useFetch(url, {
78 |     method: "post",
79 |     body: form,
80 |   });
81 | 
82 |   isLoading.value = false;
83 |   if (error.value) {
84 |     _error.value = error.value.data.error;
85 |     return;
86 |   }
87 | 
88 |   const auth = useAuth();
89 |   auth.value.isAuthenticated = true;
90 |   navigateTo("/");
91 | }
92 | </script>
93 | 


--------------------------------------------------------------------------------
/pages/profile.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p>Welcome Sarthak</p>
 3 | </template>
 4 | 
 5 | <script>
 6 | definePageMeta({
 7 |   layout: "sidebar",
 8 |   middleware: ["auth"],
 9 | });
10 | </script>
11 | 


--------------------------------------------------------------------------------
/public/images/iphone-12-pro.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/nuxtjs-course-2022/3f7bb1dd7c6a95387a6581860dde39eba232054a/public/images/iphone-12-pro.webp


--------------------------------------------------------------------------------
/public/images/iphone-12.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/nuxtjs-course-2022/3f7bb1dd7c6a95387a6581860dde39eba232054a/public/images/iphone-12.webp


--------------------------------------------------------------------------------
/public/images/iphone-13-pro.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/nuxtjs-course-2022/3f7bb1dd7c6a95387a6581860dde39eba232054a/public/images/iphone-13-pro.webp


--------------------------------------------------------------------------------
/public/images/iphone-13.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bitfumes/nuxtjs-course-2022/3f7bb1dd7c6a95387a6581860dde39eba232054a/public/images/iphone-13.webp


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | *


--------------------------------------------------------------------------------
/server/api/iphones.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler(() => {
2 |   return ["iphone-12", "iphone-12-pro", "iphone-13", "iphone-13-pro"];
3 | });
4 | 


--------------------------------------------------------------------------------
/server/routes/iphones.ts:
--------------------------------------------------------------------------------
1 | export default defineEventHandler(() => {
2 |   return ["iphone-12", "iphone-12-pro", "iphone-13", "iphone-13-pro"];
3 | });
4 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./components/**/*.{js,vue,ts}",
 5 |     "./layouts/**/*.vue",
 6 |     "./pages/**/*.vue",
 7 |     "./plugins/**/*.{js,ts}",
 8 |     "./nuxt.config.{js,ts}",
 9 |   ],
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   plugins: [],
14 | };
15 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   // https://v3.nuxtjs.org/concepts/typescript
3 |   "extends": "./.nuxt/tsconfig.json"
4 | }
5 | 


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