bootd
@bootd
Гугли и ты откроешь врата знаний!

Как правильно подключить @nuxtjs/amp модуль в проект?

Встала необходимость создания amp страниц для сайта на nuxt.js.
Загуглил, нашёл модуль.

Подключил в nuxt.config.js:

// ...
modules: [
  // ...
  '@nuxtjs/amp'
],
amp: {
  origin: process.env.BASE_URL,
  css: '@/assets/styles/pages/amp-recipes.scss',
  routeAliases: [
    '/recipes'
  ]
},
// ...

Создал в папке layout шаблон amp.vue:

<template>
  <amp-body>
    <h1>AMP</h1>
    <Nuxt />
  </amp-body>
</template>

Каталог pages для указанного alias выглядит так:

recipes->index.vue
recipes->_slug.vue

Указал для recipes->index.vue свойство ampLayout: 'amp'.
Указал для recipes->_slug.vue свойство ampLayout: 'amp'.

Проверяем перейдя по такому пути: http://localhost:3000/amp/recipes/.
Работает, всё полетело, показался заголовок AMP.

Заходим http://localhost:3000/amp/recipes/какой-то слаг.
Вылазит 404 страница.

Не пойму в чём дело, доку и гугл уже весь обшарил, копал внутренности самого модуля в папке node_modules, но и там не нашёл никаких особо ответов, ничего не понимаю, что я упустил?

А так же, можно ли создать отдельный amp шаблон для страницы и как-то его указать? Ибо плодить множество условий v-if="$isAMP" в 1м шаблоне не самая лучшая идея.
  • Вопрос задан
  • 420 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы