Vue.js

Команды

`npm install nuxi`	Установка nuxi
`npx nuxi init НАЗВАНИЕ`	Создание проекта на nuxt
`npx nuxi dev`	Запуск приложения
`npx nuxi add component НАЗВАНИЕ`	Создание компонента
`npx nuxi add page НАЗВАНИЕ`	Создание страницы
`npx nuxi add layout default`	Создание страницы по умолчанию (layout)
`npx nuxi build`	Сборка приложения
`npx nuxi preview`	Предпросмотр приложения

Структура проекта

nuxt.config.ts

Файл конфигурации nuxt

export default defineNuxtConfig({
  devtools: { enabled: true },
  ssr: true,
  css: ['~/assets/style.css']
})

css — глобальное подключение стилей
ssr — true/false server side render

Composition API

Импорты Vue

import { computed, reactive, ref } from 'vue'

Подключение Router

import { useRoute } from 'vue-router'
const route = useRoute()

Подключение Store

import {useAppStore} from "@/stores/app.js";
const store = useAppStore();

Meta данные на странице

definePageMeta({
    title: 'Наши контакты'
})

Вывод meta данных в App.vue

const year = (new Date).getFullYear()
const title = computed(() => `${route.meta.title} в ${year} г.`)
const id = computed(() => route.params.id)

useHead({
    title: `Страница ${title}, с ${id.value}`
})

useHead	для управления любыми данными в секции head
useSeoMeta	?

Создание переменной для хранения

import {reactive, ref} from "vue";

const items = ref(0);

const items = reactive([
  {
    ...
  }
]);

`ref()`	для одного значения
`reactive([])`	для массива объектов
`reactive({})`	для объектов