Базовая разметка страниц

Question

Начал разбираться с основами работы с компонентами Vue.js. Собираю код с помощью laravel-mix. Создал index.html, хочу в body добавить хедер, контент и футер с помощью компонентов Vue.js. На выходе получаю лишний div в коде - как можно от него избавиться?

<!doctype html>
<html class="h-full" lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div>
         <header></header>
         <main role="content"></main>
         <footer></footer>
    </div>
    <script src="js/app.js"></script>
</body>
</html>

Дополнительный вопрос: как сделать другой лейаут для страницы авторизации? На этой странице не будет хедера и футера, будут меняться классы у тега main. Нашел информацию, что это делается это через динамические компоненты или через хранение лейаута в сторе. Есть ли способ проще, может быть, как-то развить тему именованных слотов?

Исходные файлы:

index.html

<!doctype html>
<html class="h-full" lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/tailwind.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="app"></div>
    <script src="js/app.js"></script>
</body>
</html>

App.vue

<template>
    <Layout>
        <template v-slot:header>
            <Header/>
        </template>

        <router-view></router-view>

        <template v-slot:footer>
            <Footer/>
        </template>
    </Layout>
</template>

<script>
    import Layout from './layouts/TheLayout'
    import Header from './components/TheHeader'
    import Footer from './components/TheFooter'


    export default {
        components: {
            Layout,
            Header,
            Footer
        },
    }
</script>

TheLayout.vue

<template>
    <div>
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
    </div>
</template>

<script>
    export default {}
</script>

Answer 1

<div> не может быть убран.
Можно использовать вычисляемые свойства для выбора другого лейаута.

<template>
    <Layout>
        <template #header>
            <Header v-if="isBoard"/>
        </template>

        <router-view></router-view>

        <template #footer>
            <Footer v-if="isBoard"/>
        </template>
    </Layout>
</template>

<script>
    import Layout from './layouts/BaseLayout'
    import Header from './components/TheHeader'
    import Footer from './components/TheFooter'
    
    export default {
        computed: {
            isBoard() {
                return this.$route.name === 'Board'
            }
        },
        components: {
            Layout,
            Header,
            Footer
        },
    }
</script>

БЛОГ НА HUSL

Базовая разметка страниц

Ответы (1 шт):