Задать вопрос
neuotq

Александр Талалаев

Прокрастинация
Ответы пользователя по тегу Nuxt.js

  • Как определить грань межу использованием nuxt и использованием привычных решений вроде express для backend-части?

    neuotq
    @neuotq
    Прокрастинация
    Изначально nuxtjs(и его вдохновитель nextjs) - фреймворки, которые представляют собой готовый рецепт и набор правил для построения приложений на библиотеке Vue.js или React. Хотя можно обойтись без них и строить приложения как душе угодно, но удобнее иметь набор правил в сообществе и в команде. В процессе разработки фронтенд-приложений постепенно появляется необходимость в различных оптимизациях, в том числе в скорости и SEO, поэтому активно развивается бэкэнд для фронтенда. Он используется в основном для дополнительного кеширования и рендеринга на стороне сервера.

    Конечно, вы можете подключаться к базе данных для получения информации. Для этого есть специализированные плагины и практики(можно прям гуглить nuxt 3 mysql). В целом, у вас есть доступ ко всем возможностям Node.js, так что всё в ваших руках. Чаще всего используются какие-либо ORM (Object-Relational Mapping), которые облегчают доступ к БД, убирая рутину на себя и предоставляя удобный доступ к данным. Например, Prisma.

    В целом, обычно в Nuxt.js и подобных фреймворках напрямую с БД не работают, так как это ломает классическую архитектуру подобных приложений с разделением логики, масштабирования и т.п. Так что даже если на бэкенде Node.js, то это отдельные независимые сервисы, которые предоставляют каким-либо образом доступ к подготовленным данным из БД (например через REST API), а уже приложение на Next.js обращается к нему и в своей бэкенд-части и через браузер.

    Резюмируя: Nuxt - для отображения интерфейса/фронтенда, даже при использовании рендринга на стороне сервера, получение обновление данных через API(REST/GraphQL/... ).
    Express/Nest(что угодно другое бэкэндерское) - ядро бизнес логики, обработка данных, работа с БД, постороение API и тп.
    Это если кратко, а так гуглите про архитектуру приложений, информации море, тема обширная.
    Ответ написан
    1 комментарий
    1 комментарий

  • Как интегрировать существующий блог на Wordpres в веб приложение на Nuxt.js?

    neuotq
    @neuotq
    Прокрастинация
    У вас два варианта.
    1. Использлвовать REST API от вордпресса, плюс есть различные тематические плагины отдельно и API эндпоинты у разных популярных крупных плагинов.
    2. Если на одном сервере и тп, делать прямые запросы к БД в самом NUXT допустим через Prisma
    Ответ написан
    1 комментарий
    1 комментарий

  • NuxtJS 3: Как сделать чтобы страницы могли изменять глобальное состояние приложения?

    neuotq
    @neuotq
    Прокрастинация
    Вы немного перемудрили, стор в данном случае вам не нужен, даже логически зачем. Ведь это не доп инфа от пользователя, какое-то дополнительное состояние приложение которое нужно отслеживать и тд и тп.
    У вас уже есть роутер, который управляет и держит в себе необходимое состояние и удобный доступ к текущему пути через useRoute или $route внутри vue компонента.
    Вот документация и на Vue
    https://router.vuejs.org/api/interfaces/routelocat...
    https://router.vuejs.org/api/interfaces/router.html.
    // Получим объект текщего пути
const { currentRoute } = useRouter();
/*
Далее у него можно брать уже name, path и тп
*/

<template>
  <header :class="{ 'is-absolute': isAbsolute }"></header>
</template>

<script setup lang="ts">
const { currentRoute } = useRouter();
/* Заменить на своё */
const isAbsolute = currentRoute.name === 'index' ;
</script>


    PS отдельный вопрос что в целом движ по вёрстке возможно спорный, что ради баннера нужно менять такие штуки у ключевых элементов, возможно логику нужно поменять, а может всё ок, но это уже другая история.
    Ответ написан
    3 комментария
    3 комментария

  • Как задеплоить приложение на Express.js в связке с Nuxt.js на хостинге Beget?

    neuotq
    @neuotq
    Прокрастинация
    Вы как-то мало подробностей написали. Но как я понял у вас vps и вы заходите через ssh и в консоле запускаете просто node app.js ?
    По хорошему нужно делать нормальный цикл с ci/cd.
    В любом случае начинайте с pm2.
    А далее будет pm2 start app.js.
    pm2 возьмёт на себя управление процессом для приложения.
    При деплое нужно его перезапускать(повторюсь по хорошему нужны ci/cd скрипты и тп).
    Ответ написан
    3 комментария
    3 комментария

  • Как в asyncData axios сделать вывод ошибок?

    neuotq
    @neuotq
    Прокрастинация
    В nuxt.js лучше всего настроить общую централизованную обработку ошибок, через плагин и хелперы. Там есть "перехватчики" разных событий, в том числе onError, onRequestError, onResponseError, с помощью них легко и удобно сделать уведомления и/или редиректы для пользователя когда что-то пошло не так. Нужно помнить что asyncData предназначен для логики в контексте страницы, поэтому у него свои особенности работы и автоматическое установление локального состояния, удобно сокращает код и сразу данные доступны в шаблоне.
    Возможно вам лучше подойдёт fetch, у него немного иная логика работы, ближе к условной привычной, к примеру в отличии от asyncData он не ждёт окончания его выполнение перед загрузкой(те возвращает промис, не ожидая его полного разрешения до финиша как asyncData ). В компоненте у вас будет доступен $fetchState, где можно отлавливать ошибку $fetchState.error. Но данные для шаблона нужно ставить самому, те определить нужные в data:
    data() {
      return {
        banners: [],
        currentPage: null,
        lastPage: null,
        perPage: null,
      }
    },

    И потом уже в fetch их устанавливать.
    Короче говоря посмотрите документацию, там всё предельно кратко и ясно для начальных простых условий:
    https://nuxtjs.org/docs/2.x/features/data-fetching
    Ответ написан
    Комментировать
    Комментировать

  • Почему так компилирует?

    neuotq
    @neuotq
    Прокрастинация
    Вы используете extractCSS - он по умолчанию вытаскивает каждый CSS по компонентно, можно исправить через принудительную отмену механизмов вебпака в splitChunks, в оф документации есть хак:

    export default {
  build: {
    extractCSS: true,
    optimization: {
      splitChunks: {
        cacheGroups: {
          styles: {
            name: 'styles',
            test: /\.(css|vue)$/,
            chunks: 'all',
            enforce: true
          }
        }
      }
    }
  }
}
    Ответ написан
    18 комментариев
    18 комментариев