├── .gitignore
├── README.md
├── components
    ├── Blog
    │   ├── Post.vue
    │   ├── PostList.vue
    │   └── PostPreview.vue
    ├── TheHeader.vue
    └── TheIntro.vue
├── layouts
    ├── admin.vue
    └── default.vue
├── middleware
    ├── auth-check.global.js
    └── auth.js
├── nuxt.config.ts
├── package-lock.json
├── package.json
├── pages
    ├── about.vue
    ├── admin
    │   └── index.vue
    ├── auth.vue
    ├── blog
    │   └── [id].vue
    └── index.vue
├── stores
    ├── auth.js
    └── blog.js
└── tsconfig.json


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Nuxt 3 Minimal Starter
 2 | 
 3 | Look at the [nuxt 3 documentation](https://v3.nuxtjs.org) to learn more.
 4 | 
 5 | ## Setup
 6 | 
 7 | Make sure to install the dependencies:
 8 | 
 9 | ```bash
10 | # yarn
11 | yarn install
12 | 
13 | # npm
14 | npm install
15 | 
16 | # pnpm
17 | pnpm install --shamefully-hoist
18 | ```
19 | 
20 | ## Development Server
21 | 
22 | Start the development server on http://localhost:3000
23 | 
24 | ```bash
25 | npm run dev
26 | ```
27 | 
28 | ## Production
29 | 
30 | Build the application for production:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | Locally preview production build:
37 | 
38 | ```bash
39 | npm run preview
40 | ```
41 | 
42 | Checkout the [deployment documentation](https://v3.nuxtjs.org/docs/deployment) for more information.
43 | 


--------------------------------------------------------------------------------
/components/Blog/Post.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="post">
 3 |     <div class="post-header">
 4 |       <h1>{{ post.title }}</h1>
 5 |       <img :src="post.imgUrl" class="my-3 img-fluid" alt="" />
 6 |       <p>{{ post.descr }}</p>
 7 |     </div>
 8 |     <div class="post-body">
 9 |       {{ post.content }}
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script setup>
15 |     defineProps({
16 |         post: {
17 |             type: Object,
18 |             required: true,
19 |         }
20 |     })
21 | </script>


--------------------------------------------------------------------------------
/components/Blog/PostList.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <!-- Posts -->
 3 |     <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
 4 |       <post-preview v-for="post in posts" :key="post.id" :post="post" />
 5 |     </div>
 6 |     <!-- # Posts -->
 7 | </template>
 8 | 
 9 | <script setup>
10 | import PostPreview from '@/components/Blog/PostPreview'
11 | 
12 | defineProps({
13 |     posts: {
14 |         type: Array,
15 |         required: true
16 |     }
17 | })
18 | 
19 | 
20 | </script>


--------------------------------------------------------------------------------
/components/Blog/PostPreview.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="col">
 3 |     <nuxt-link :to="getLink" class="card h-100">
 4 |       <img :src="post.imgUrl" class="card-img-top" alt="" />
 5 |       <div class="card-body">
 6 |         <h5 class="card-title">{{ post.title }}</h5>
 7 |         <p class="card-text">
 8 |           {{ post.descr }}
 9 |         </p>
10 |       </div>
11 |     </nuxt-link>
12 |   </div>
13 | </template>
14 | 
15 | <script setup>
16 | import { computed } from "vue";
17 | 
18 | const props = defineProps({
19 |     post: {
20 |         type: Object,
21 |         required: true
22 |     }
23 | })
24 | 
25 | const getLink = computed(() => {
26 |   return `/blog/${props.post.id}`;
27 | });
28 | 
29 | </script>
30 | 
31 | <style scoped>
32 |  .card img {
33 |     height: 14rem;
34 |     object-fit: cover;
35 |  }
36 |  .card{
37 |    color: rgba(0,0,0,.9);
38 |    text-decoration: none;
39 |  }
40 |  .card-text {
41 |    color: rgba(0,0,0,.5);
42 |  }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/components/TheHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <nav class="navbar navbar-expand-lg bg-light">
 3 |   <div class="container-fluid">
 4 |     <NuxtLink class="navbar-brand" to="/">Nuxt.js 3 Site</NuxtLink>
 5 |     <div class="" id="navbarSupportedContent">
 6 |       <ul class="navbar-nav">
 7 |         <li class="nav-item">
 8 |           <NuxtLink class="nav-link" to="/">Home</NuxtLink>
 9 |         </li>
10 |         <li class="nav-item">
11 |           <NuxtLink class="nav-link" to="/about">About</NuxtLink>
12 |         </li>
13 | 
14 |         <li v-if="getAuthUser" class="nav-item">
15 |           <NuxtLink class="nav-link" to="/admin">Admin</NuxtLink>
16 |         </li>
17 | 
18 |         <li v-if="getAuthUser" class="nav-item">
19 |           <a class="nav-link" @click.prevent="logout" href="#">Logout</a>
20 |         </li>
21 | 
22 |         <li v-if="!getAuthUser" class="nav-item">
23 |           <NuxtLink class="btn btn-primary" style="margin-left: 0.5rem" to="/auth">Sign in</NuxtLink>
24 |         </li>
25 |       </ul>
26 |     </div>
27 |   </div>
28 | </nav>
29 | </template>
30 | 
31 | <script>
32 | import {computed} from 'vue'
33 | import {authStore} from '@/stores/auth'
34 | 
35 | 
36 | 
37 | export default {
38 |   setup() {
39 |     const userStore = authStore()
40 | 
41 |     const getAuthUser = computed(() => {
42 |       return userStore.checkAuthUser
43 |     })
44 | 
45 |     function logout() {
46 |       userStore.logoutUser()
47 |     }
48 | 
49 |     return {
50 |       getAuthUser,
51 |       logout
52 |     }
53 |   },
54 | }
55 | </script>


--------------------------------------------------------------------------------
/components/TheIntro.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="intro-block my-5">
 3 |         <h1 class="mb-3">Test site on nuxt.js 3</h1>
 4 |         <div class="intro-block__subtitle">The site uses: pinia.js, bootstrap 5, firebase, ssr, dynamic routes</div>
 5 |     </div>
 6 | </template>
 7 | 
 8 | 
 9 | <style scoped>
10 |     .intro-block {
11 |         text-align: center;
12 |     }
13 | </style>


--------------------------------------------------------------------------------
/layouts/admin.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="admin-layout">
 3 |     <the-header />
 4 |     <NuxtPage />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | import {authStore} from '@/stores/auth'
10 | 
11 | // definePageMeta({
12 | //   middleware: ["auturize-check"]
13 |   
14 | // })
15 | 
16 | const userStore = authStore()
17 | 
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <the-header />
 4 |     <NuxtPage :key="$route.fullpath" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | import {authStore} from '@/stores/auth'
10 | 
11 | const userStore = authStore()
12 | 
13 | </script>
14 | 


--------------------------------------------------------------------------------
/middleware/auth-check.global.js:
--------------------------------------------------------------------------------
 1 | import {authStore} from '../stores/auth'
 2 | 
 3 | export default defineNuxtRouteMiddleware((to) => {
 4 |     const {ssrContext} = useNuxtApp()
 5 |     const storeAuth = authStore()
 6 | 
 7 |     // console.log('ssrContext', ssrContext)
 8 | 
 9 |     if (process.client) {
10 |         storeAuth.initAuth(null)
11 |     } else {
12 |         storeAuth.initAuth(ssrContext?.req?.rawHeaders)
13 |     }
14 | 
15 |   })
16 | 


--------------------------------------------------------------------------------
/middleware/auth.js:
--------------------------------------------------------------------------------
 1 | import {authStore} from '../stores/auth'
 2 | 
 3 | export default defineNuxtRouteMiddleware((to) => { 
 4 |     const storeAuth = authStore()
 5 |        
 6 |     if(!storeAuth.checkAuthUser) {
 7 |         return '/auth'
 8 |     }
 9 |     
10 | })
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | // https://v3.nuxtjs.org/api/configuration/nuxt.config
 2 | export default defineNuxtConfig({
 3 |   app: {
 4 |     head: {
 5 |       link: [
 6 |         {
 7 |           rel: "stylesheet",
 8 |           href: "https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css",
 9 |         },
10 |       ],
11 |     },
12 |     pageTransition: true
13 |   },
14 | 
15 |   modules: [
16 |     "@pinia/nuxt",
17 |     //"vee-validate",
18 |     //"yup"
19 |   ],
20 |   css: [],
21 | });
22 | 


--------------------------------------------------------------------------------
/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 |   },
 9 |   "devDependencies": {
10 |     "nuxt": "3.0.0-rc.12"
11 |   },
12 |   "dependencies": {
13 |     "@pinia/nuxt": "^0.4.3",
14 |     "js-cookie": "^3.0.1",
15 |     "vee-validate": "^4.5.11",
16 |     "yup": "^0.32.11"
17 |   }
18 | }
19 | 


--------------------------------------------------------------------------------
/pages/about.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |     <div class="container">
3 |         <h1 class="my-5">About</h1>
4 |     </div>
5 | </template>


--------------------------------------------------------------------------------
/pages/admin/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <h1 class="my-5">Admin dashboard</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script setup>
 8 | useHead({
 9 |   title: "My admin page",
10 | });
11 | 
12 | definePageMeta({
13 |   layout: "admin",
14 |   middleware: ['auth']
15 | 
16 | });
17 | </script>
18 | 


--------------------------------------------------------------------------------
/pages/auth.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <h1 class="my-5">Auth</h1>
 4 |     <div class="row justify-content-center">
 5 |       <div class="col-6">
 6 |         <form @submit="onSubmit" id="form-auth">
 7 |           <div class="mb-3">
 8 |             <label class="form-label">Email address</label>
 9 |             <input
10 |               v-model="email"
11 |               type="email"
12 |               id="email"
13 |               @blur="emailBlur"
14 |               :class="{ 'is-invalid': emailError }"
15 |               class="form-control"
16 |             />
17 |             <div v-if="emailError" class="invalid-feedback">
18 |               {{ emailError }}
19 |             </div>
20 |           </div>
21 |           <div class="mb-3">
22 |             <label class="form-label">Password</label>
23 |             <input
24 |               v-model="password"
25 |               type="password"
26 |               @blur="passBlur"
27 |               id="password"
28 |               :class="{ 'is-invalid': passError }"
29 |               class="form-control"
30 |             />
31 |             <div v-if="passError" class="invalid-feedback">{{ passError }}</div>
32 |           </div>
33 |           <button type="submit" class="btn btn-primary">Submit</button>
34 |         </form>
35 |       </div>
36 |     </div>
37 |   </div>
38 | </template>
39 | 
40 | <script setup>
41 | import { useForm, useField } from "vee-validate";
42 | import * as yup from "yup";
43 | 
44 | import {authStore} from '@/stores/auth'
45 | 
46 | import {useRouter} from 'vue-router'
47 | 
48 | const userStore = authStore()
49 | const router = useRouter()
50 | 
51 | const { handleSubmit } = useForm();
52 | 
53 | // Валидация формы
54 | const {value: email, errorMessage: emailError, handleBlur: emailBlur} = useField('email', yup.string().required().email())
55 | const {value: password, errorMessage: passError, handleBlur: passBlur} = useField('password', yup.string().required().min(6))
56 | 
57 | // Авторизация пользователя
58 | const onSubmit = handleSubmit( async(values) => {
59 |         await userStore.authUser(values)
60 |           .then(() => {
61 |             router.push('/')
62 |           })
63 |     } );
64 | 
65 | </script>
66 | 


--------------------------------------------------------------------------------
/pages/blog/[id].vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <!-- <p v-if="pending">Загрузка...</p> -->
 4 |     <post class="my-5" :post="post" />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script setup>
 9 | import Post from "@/components/Blog/Post.vue";
10 | import { useRoute } from "vue-router";
11 | import { computed, ref } from "vue";
12 | 
13 | const route = useRoute();
14 | 
15 | const post = ref(null)
16 | const res = await $fetch(`https://blog-nuxtjs-c3952-default-rtdb.asia-southeast1.firebasedatabase.app/posts/${route.params.id}.json`)
17 | post.value = res
18 | 
19 | </script>
20 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="container">
 3 |         <the-intro />
 4 |         <p v-if="postLoading">Загрузка...</p>
 5 |         <p v-if="error">{{error.message}}</p>
 6 |         <!-- <p v-else>{{ posts }}</p> -->
 7 |         <post-list v-else :posts="posts" />
 8 | 
 9 |     </div>
10 | </template>
11 | 
12 | <script setup>
13 |     import PostList from '../components/Blog/PostList.vue'
14 |     import { useBlogStore } from '@/stores/blog'
15 |     import {ref, computed} from 'vue'
16 |     import { storeToRefs } from 'pinia'
17 | 
18 |     const {posts, error, postLoading} = storeToRefs(useBlogStore())
19 |     const {loadPosts} = useBlogStore()
20 | 
21 |     if(!posts.value.length) {
22 |         loadPosts()
23 |     }
24 | 
25 | </script>


--------------------------------------------------------------------------------
/stores/auth.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | import Cookies from 'js-cookie'
 3 | 
 4 | export const authStore = defineStore('auth', {
 5 |     state: () => {
 6 |         return {
 7 |             token: null
 8 |         }
 9 |     },
10 |     getters: {
11 |         checkAuthUser(state) {
12 |             return !!state.token
13 |         }
14 |     },
15 |     actions: {
16 |         async authUser(userData) {
17 |             const key = 'AIzaSyCcFderO-gm1_ki1Z1UhzpGfh0AXY9OKkw'
18 |             // console.log('login: ', userData)
19 | 
20 |             try {
21 |                 const response = await $fetch(`https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${key}`, {method: 'POST', body: {...userData, "returnSecureToken": true}})
22 |                 
23 |                 const token = response.idToken
24 | 
25 |                 this.token = token
26 |                 localStorage.setItem('jwt', token)
27 |                 Cookies.set('jwt', token, {sameSite: 'None', secure: true})
28 | 
29 | 
30 |                 //response.idToken
31 |             } catch (error) {
32 |                 console.log(error)
33 |             }
34 |         },
35 | 
36 |         logoutUser() {
37 |             this.token = null
38 |             localStorage.removeItem('jwt')
39 |             Cookies.remove('jwt')
40 |             
41 |         },
42 | 
43 |         initAuth(req) {
44 |             // this.token = Cookies.get('jwt')
45 |             let token
46 |             if(req) {
47 |                 const jwtToken = req.find(t => t.trim().startsWith('jwt='))
48 | 
49 |                 if(jwtToken) {
50 |                     token = jwtToken.split('=')[1]
51 |                     this.token = token
52 |                 } else {
53 |                     return false
54 |                 }
55 | 
56 |             } else {
57 |                 if(process.client) {
58 |                     token = localStorage.getItem('jwt')
59 |                 }
60 |                 this.token = token
61 |             }
62 |         },
63 | 
64 |     }
65 | })


--------------------------------------------------------------------------------
/stores/blog.js:
--------------------------------------------------------------------------------
 1 | import { defineStore } from 'pinia'
 2 | 
 3 | export const useBlogStore = defineStore('blog', {
 4 |     state: () => {
 5 |         return {
 6 |            posts: [],
 7 |            error: null,
 8 |            postLoading: false
 9 |         }
10 |     },
11 |     getters: {
12 |         getPosts(state){
13 |             return state.posts
14 |         }
15 |     },
16 |     actions: {
17 |         async loadPosts() {
18 |             try {
19 |                 this.postLoading = true
20 |                 const res = await $fetch('https://blog-nuxtjs-c3952-default-rtdb.asia-southeast1.firebasedatabase.app/posts.json')
21 |                 this.posts = Object.keys(res).map(key => {
22 |                     return {...res[key], id: key}
23 |                 })
24 | 
25 |             } catch (error) {
26 |                 this.error = error
27 |                 console.log(error)
28 |             } finally {
29 |                 this.postLoading = false
30 |             }
31 |            
32 |         }
33 |     }
34 | })


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


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