Nuxt 3: SSR и SSG для Vue-приложений

1npx nuxi init my-app
2cd my-app
3npm install
4npm run dev

1pages/
2  index.vue      -> /
3  about.vue      -> /about
4  blog/
5    index.vue    -> /blog
6    [slug].vue   -> /blog/:slug

1<!-- pages/blog/[slug].vue -->
2<script setup>
3const route = useRoute();
4const slug = route.params.slug;
5</script>

1pages/
2  dashboard/
3    index.vue       -> /dashboard
4    settings.vue    -> /dashboard/settings
5    profile/
6      index.vue     -> /dashboard/profile

1<script setup>
2const { data: posts } = await useFetch('/api/posts');
3</script>

1<script setup>
2const { data, pending, error } = await useAsyncData('posts', () =>
3  $fetch('/api/posts')
4);
5</script>

1// nuxt.config.ts
2export default defineNuxtConfig({
3  ssr: true,
4});

1npm run generate

1// server/routes/api/posts.js
2export default defineEventHandler(() => {
3  return ['post-1', 'post-2', 'post-3'];
4});
5
6// pages/blog/[slug].vue
7<script setup>
8const route = useRoute();
9const { data: post } = await useFetch(`/api/posts/${route.params.slug}`);
10</script>

1<template>
2  <MyComponent />
3</template>
4<!-- Автоматически импортируется из components/MyComponent.vue -->

1// composables/useCounter.js
2export const useCounter = () => {
3  const count = ref(0);
4  const increment = () => count.value++;
5  return { count, increment };
6};
7
8// Доступно без импорта!
9<script setup>
10const { count, increment } = useCounter();
11</script>

1layouts/
2  default.vue
3  admin.vue

1<!-- pages/dashboard.vue -->
2<template>
3  <NuxtLayout name="admin">
4    <p>Содержимое страницы</p>
5  </NuxtLayout>
6</template>

1// middleware/auth.js
2export default defineNuxtRouteMiddleware((to, from) => {
3  const isAuthenticated = useAuth().isAuthenticated;
4  if (to.meta.requiresAuth && !isAuthenticated) {
5    return navigateTo('/login');
6  }
7});

1<script setup>
2definePageMeta({
3  middleware: 'auth',
4});
5</script>

1// server/api/users.get.js
2export default defineEventHandler(async () => {
3  const users = await db.user.findMany();
4  return users;
5});

1// server/api/users.post.js
2export default defineEventHandler(async (event) => {
3  const body = await readBody(event);
4  const user = await db.user.create({ data: body });
5  return user;
6});

1// plugins/axios.js
2export default defineNuxtPlugin((nuxtApp) => {
3  const axios = { /* ... */ };
4  nuxtApp.provide('axios', axios);
5});

1<script setup>
2const { $axios } = useNuxtApp();
3</script>

1// server/middleware/log.js
2export default defineEventHandler((event) => {
3  console.log(`[${event.method}] ${event.path}`);
4});

1npx vercel

1npx netlify deploy

1FROM node:18-alpine
2WORKDIR /app
3COPY . .
4RUN npm run build
5CMD ["npm", "run", "start"]