Встала необходимость создания 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м шаблоне не самая лучшая идея.