Запуск проекта

npx naxi dev

Теперь главная страница сайта доступна по порту 3000

http://localhost:3000

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

В корне проектаоздадим папки components, assets, static. Сделать это можно одной командой:

mkdir components assets static

Также в корне проекта создаём файл nuxt.config.js:

touch nuxt.config.js

Рассмотрим начальную структуру проекта. Подробнее о каждой папке.

2 .1 pages

Дирректория pages содержит маршрутные компоненты. Каждому файлу с расширением .vue этой папки Nuxt формирует соответствующий маршрут.

Маршруту главной страницы соответствует компонент index.vue. Все маршрутные компоненты создаём в этой папке. Например: about.vue, contacts.vue ...

Ссылку на такой маршрут лучше формировать с помощью специального в тэга NuxtLink.

    <NuxtLink to="/about">
      About (internal link that belongs to the Nuxt App)
    <NuxtLink>

2 .2 components

Дирректория components - папка для хранения маршрутных компонентов Vue.js.

Здесь мы можем создавать свои компоненты и импортировать файлы  .vue. 

2 .3 assets

Данный каталог содержит нескомпилированные активы, такие как файлы Stylus или Sass, изображения или шрифты. В template ссылка на изображение может выглядеть так:

src="~/assets/your_image.png"

Подробнее - по ссылке Документация Nuxt

2 .4 public

Каталог public воспринимается клиентом как корневой. По сути, это папка для хранения любых файлов, которые надо хранить в открытом доступе, например иконку приложения и карту сайта.

В этой папке создадим два файла robots.txt и favicon.ico. Тогда

/static/robots.txt будет доступен по адресу http://localhost:3000/robots.txt

/static/favicon.ico будет доступен по адресу  http://localhost:3000/favicon.ico

Если не собираетесь компилировать свои изображения и стили, то эта папка также подходит и для стилей и изображений. Тогда ссылка на изображение будет выглядеть так:

src="/my-image-2.png"

2 .5 plugins

Автоматическое подключение плагинов из этой папки в проект. Сперва необходимо создать плагин в этой папке. Затем подключить его в файле nuxt.config.js.

Для реализации запросов на бэкенд, можно воспользоваться Axios.

Установка модуля:

npm install @nuxtjs/axios

После чего, создайте файл axios.js со следующим содержимым:

 import axios from 'axios';
//import {store} from  '@/store/index';
export default defineNuxtPlugin(nuxtApp => {
    //console.log(store.state.token);
    axios.defaults.baseURL = 'http://localhost:8000/api/';
    axios.defaults.headers["content-type"] = "application/json";
    axios.defaults.headers.common.authorization = `Bearer `;
    axios.defaults.headers.common['Access-Control-Allow-Origin'] = '*';
});

Подключение плагинов в файле nuxt.config.js

export default {
    css: ['~/assets/css/main.css'],
    modules: ['@nuxtjs/axios'],

    plugins: ['~/plugins/axios.js']
}

2 .6 layouts

Папка layouts предназначена для хранения компонента базового шаблона.

Подробнее по ссылке https://nuxt.com/docs/guide/directory-structure/layouts

2 .7 nuxt.config.js

В корне проекта должен находиться файл nuxt.config.js Его содержимое зависит от модулей и настроек поекта. Вот пример:

export default defineNuxtConfig({
    app: {
        head: {
            title: 'Welcome to BaseToB!',
            meta: [
                { name: 'description', content: 'Everything about - Nuxt-3' }
            ],
        }
    },
    css: ['~/assets/css/main.css'],
    plugins: ['~/plugins/axios.js'],
    modules: ['@vuestic/nuxt', '@nuxt/ui'],
    vuestic: {
        config: {
            colors: {
                variables: {
                    // Базовые цвета
                    primary: '#23e066',
                    secondary: '#002c85',
                    success: '#40e583',
                    info: '#2c82e0',
                    danger: '#e34b4a',
                    warning: '#ffc200',
                    gray: '#babfc2',
                    dark: '#34495e',
                    // Пользовательские цвета
                    yourCustomColor: '#d0f55d',
                },
            }
        }
    }
})