У нас есть настройка Nuxt с автоматически сгенерированным router.js
. То, чего я пытаюсь добиться, - это другой макет для определенных страниц, с другой структурой HTML. Я ожидаю, что макет будет добавлен в nuxt.config.js как метатег (meta: { layout: 'newLayout' }
).
Что я сделал:
- создал новый файл макета в / layouts /,
newLayout.vue
:
<template>
<div class="testclass">
<Top />
<Header />
<nuxt />
<Footer />
</div>
</template>
<script>
import Top from '~/components/Top.vue';
import Header from '~/components/Header.vue';
import Footer from '~/components/Footer.vue';
import init from '~/mixins/init';
export default {
components: {
Top,
Header,
Footer,
},
mixins: [init],
mounted() {
console.log('blep');
},
};
</script>
Указано Я хотел использовать новый макет на нужных мне страницах. Я пробовал как
meta: {
layout: 'newLayout',
},
, так и просто
layout: 'newLayout',
Я проверяю, появляется ли что-нибудь в
router.js
, но пока это не так. Правильный макет также не загружен (естественно).
Мое дерево файлов выглядит следующим образом:
nuxt/
--| components/
--| layouts/
----| default.vue
----| newLayout.vue
--| pages/
----| newLayout/
------| _.vue
------| index.vue
----| _.vue
----| index.vue
----| newLayout.vue
Какой шаг мне не хватает?
Примечание. Я могу написать свой чек в nuxt.config.js
и сам добавить метатег, но это также дает неожиданные результаты ... вывод - meta: {"layout":"newLayout"},
, что, похоже, неверно, так как «макет» должен быть без кавычек? В любом случае это не работает ... и если я правильно читаю документы и примеры, мне не нужно будет в любом случае редактировать информацию макетов вручную.