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

Дима Паутов

Гугли и ты откроешь врата знаний!
Ответы пользователя по тегу Nuxt.js

  • Можно ли сделать параметр роута не после слеша, а после буквы во Vue (2, 3)?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Почему не сделать тогда просто /:n?

    В nuxt в корневом каталоге page создать _id.vue и всё

    P.S.
    Особенно интересна данная реализация в Nuxt при использовании роутинга на файлах.


    В nuxt не обязательно роутинг может быть на файлах, вы можете писать роутер и ручками как в обычном vue
    https://nuxtjs.org/docs/configuration-glossary/con...
    Ответ написан
    1 комментарий
    1 комментарий

  • Как получить данные в Nuxt.js?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Если у вас SSR, то делать запрос нужно в nuxtServerInit.

    Если у вас простое SPA, то сделать это можно прям в компоненте меню воспользовавшись методом fetch
    Ответ написан
    Комментировать
    Комментировать

  • Как мне изменять локальный файл JSON в nuxt?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    json server Вешаете его на отдельный порт и вот у вас json bd.
    Ответ написан
    3 комментария
    3 комментария

  • Почему у меня в store ничего нет?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Это
    if (store.copters['copters/copters'].length === 0) {


    заменить на это
    if (store.getters['copters/copters'].length === 0)
    Ответ написан
    1 комментарий
    1 комментарий

  • Nuxt.js vs Custom SSR. Как лучше реализовать server side render на Vue.js?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Nuxt.js vs Custom SSR
    я за nuxt, потому что там всё из коробки, работает как часы, множество удобных абстракций
    как лучше делать SSR на Vue
    брать nuxt и радоваться что всё работает из коробки.
    Какие сложности могут возникнуть?
    Да никаких сложностей не должно быть. Сколько проектов не делал на nuxt, я ни разу не столкнулся с проблемой SSR. Все сложности, это работа с библиотеками которые внутри обращаются к window или document. Нужно просто уметь с такими вещами работать, в остальном всё нормально.

    Чего там автор напридумал, я хз, может какие-то проблемы и могут быть, но в статье о них толком ни слова и на опыте я не встретил ни одной проблемы SSR в nuxt. Автор показал, как можно сделать иначе, это ни плохо, ни хорошо. Это просто ещё один подход. Т.к. вы по всей видимости ещё новичёк, просто берите nuxt и наслаждайтесь его работой. А если вы найдёте проблемы, о которых не договорил автор статьи, то я бы с радостью об этом почитал.

    Не нравится nuxt? Ради бога, берите оффициальный vue-server-renderer, читайте доку, настраивайте и вперёд.

    P.S. Важно понимать и помнить, что nuxt несколько отличается от просто vue проекта большим кол-вом абстракций и в некоторых местах иными конструкциями кода
    Ответ написан
    4 комментария
    4 комментария

  • Как очистить vuex после sign out?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    нет, откуда vuex должен знать, до каких значений нужно обнулить? А главное, какие свойства для этого нужно задействовать.
    Ответ написан
    Комментировать
    Комментировать

  • Как перехватывать все ошибки в приложении, если некоторые функции уже обернуты в try ... catch?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Юзаю nuxt.axios
    Плагин для axios у меня, который обрабатывает ошибки
    /plugins/axios.js
    export default ({ $axios, error, $auth }) => {
  $axios.onError(({ response }) => {
    const statusCode = response.status
    const message = response.data.message

    switch (statusCode) {
      case 401:
        $auth.logout()
        break

      case 422:
        break

      case 500:
        break

      default:
        error({
          statusCode,
          message,
        })
    }
  })
}

    Каждый статус код в конструкции switch позволяет приложению не падать, а работать дальше, что бы вы смогли в месте, где вызываете метод, вернувший ошибку что либо сделать. Или же, как у меня в случае с ошибкой 401 написать свою логику.

    Далее, в компоненте где используется функция для запроса:
    /pages/sign-in.vue
    export default {
  methods: {
    async onSignIn () {
      try {
        await this.$auth.signIn(...)
      } catch (error) {
        this.showErrors(error)
      }
    },
  }
}


    Само тело функции
    async signIn ({ username, password }) {
    const { token, expireAt, user } = await $axios.$post(..., {
      username,
      password,
    })
    //....
  }


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

  • Nuxt js(SSR) - javascript heap out of memory? как проверить откуда идет нагрузка на сервер?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Аналогичный стек и у меня, но подобные проблемы возникают лишь при выкатке фронта. Создание билда сжирает огромное кол-во ресурсов, просто тупо потому что js собирает js. Мы просто увеличили мощности, иного выхода так и не нашли. До этого решение было простым, делать билд пока не собирётся, иногда с 5го раза собирался
    Ответ написан
    3 комментария
    3 комментария

  • Как в nuxt получить доступ к хукам всего приложения?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Это называется плагины!!!! https://nuxtjs.org/api/configuration-plugins#the-p...

    А если ssr - то есть в /store/index.js экшн nuxtServerInit
    Так же есть аналогия nuxtServerInit, но для клиент части - https://www.npmjs.com/package/nuxt-client-init-module, тот же плагин, но завёрнутый в модуль
    Ответ написан
    1 комментарий
    1 комментарий

  • Почему nuxt такой медленный?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Я так понимаю, nuxt каждый раз "на лету" собирает проект и отдает клиенту

    нет, билд 1 раз сделался и только с ним и ведётся работа.

    Уже десяток сайтов сделаны на nuxt.js и никаких тормозов нет. Сборка на сервере действительно долгая(хотя так его собирать не желательно, но не об этом), но это никак не отражается на работе сайта.

    Т.к. у вас тормоза, не обязательно должен виноват быть именно nuxt.js, возможно у вас есть множество мест, которые нужно оптимизировать по части фронта. Если у вас rest api, где вроле бекенда php - то наверно стоит обратить внимание на работу бекенда и оптимизацию mysql запросов(если там мускул). Т.к. если api долго отвечает, то и nuxt будет долго ждать данные, от чего долго будет отображать страницу, знаю, проходил.

    Был и есть сейчас проект, который я делал на фрилансе, т.к. у нас 100500к товаров, то на старте проекта, когда мы тестировали, в некоторых местах загрузка страницы могла занимать около минуты, т.к. внутри бекенда(php, yii2) код был организован несколько плохо. Со временем вылизали запросы, сделал кеширование запросов и всё в целом стало ок.

    Ну и сам сервер, чем больше сайт, тем больше мощностей нужно. У нас пока 4гб, 2 ядра на Digital Ocean. В ближайших планах увеличить мощности, т.к. приток пользователей становится больше.

    Когда только разрабатывали сайт, то у нас было 1гб и 1 ядро. Этого хватило на пару месяцев, т.к. сервер не выдерживал нагрузок. Пришлось увеличить оперативку до 2х гб. А уже готовую версию, как и написал выше, до 4гб и 2 ядра
    Ответ написан
    2 комментария
    2 комментария

  • Как в NuxtJS на разные роуты отдавать один page-компонент?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    А доку то мы не читаем
    Ответ написан
    2 комментария
    2 комментария

  • Где в nuxt вызывать глобальные методы и устанавливать аналитику?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Ничего не поменялось в корне. Вы изначально не правильно даже в чистом vue подключали аналитику. Правильно, это создать плагин. В nuxt для этого есть специальная папка plugins, внутри которой создаём js файл, вставляем код аналитики и указываем подключение в конфиге nuxt.

    Что насчёт авторизации, не знаю, что у вас для этого сделано, что бы авторизовывать пользователя. Просто при инициализации приложения читаем куку с токеном у клиента и смотрим, если есть кука, берём её и авторизовываем, если нету, то нету!
    Ответ написан
    2 комментария
    2 комментария