@MarkLb

Как решить вопрос «Failed to mount component: template or render function not defined.»?

В процессе изучения Vue натолкнулся на проблему: "Failed to mount component: template or render function not defined", шёл шаг в шаг с автором курса.

Примеры решения нашёл "[Vue warn]: Failed to mount component: template or...", но там различия с моим примером. В связи со слабым знаниям языка - прошу помощи.

В файл vue-finance\src\layouts\MainLayout.vue, подключаю компоненты:
1. Navbar(vue-finance\src\components\app\Navbar.vue)
2. Sidebar(vue-finance\src\components\app\Sidebar.vue)

Подключение в MainLayout.vue:
<script>
import Navbar from '@/components/app/Navbar'
import Sidebar from '@/components/app/Sidebar'

export default {
  name: 'main-layout',
  components: {
    Navbar, Sidebar
  }
}
</script>


Итоговая ошибка: "[Vue warn]: Failed to mount component: template or render function not defined."

Скриншот
p00AIH3.png


UPD:
Файл роута: vue-finance\src\router\index.js

Код

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    {
        path: '/login',
        name: 'login',
        meta: {layout: 'empty'},
        component: () => import('../views/Login.vue')
    },
    {
        path: '/register',
        name: 'register',
        meta: {layout: 'empty'},
        component: () => import('../views/Register.vue')
    },
    {
        path: '/',
        name: 'home',
        meta: {layout: 'main'},
        component: () => import('../views/Home.vue')
    },
    {
        path: '/categories',
        name: 'categories',
        meta: {layout: 'main'},
        component: () => import('../views/Categories.vue')
    },
    {
        path: '/detail/:id',
        name: 'detail',
        meta: {layout: 'main'},
        component: () => import('../views/Detail.vue')
    },
    {
        path: '/history',
        name: 'history',
        meta: {layout: 'main'},
        component: () => import('../views/History.vue')
    },
    {
        path: '/planning',
        name: 'planning',
        meta: {layout: 'main'},
        component: () => import('../views/Planning.vue')
    },
    {
        path: '/profile',
        name: 'profile',
        meta: {layout: 'main'},
        component: () => import('../views/Profile.vue')
    },
    {
        path: '/record',
        name: 'record',
        meta: {layout: 'main'},
        component: () => import('../views/Record.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router



UPD #2:
Загрузил код проекта на Github: https://github.com/likont/vue-finance/tree/master/src
  • Вопрос задан
  • 82 просмотра
Пригласить эксперта
Ответы на вопрос 1
fallus
@fallus
В общем, всё дело в MainLayout.vue

В нём вы импортируете это:
import Navbar from '@/components/app/Navbar'
import Sidebar from '@/components/app/Sidebar'

В этих двух компонентах есть разметка.
Но она не обёрнута в тэг <template>.

Оберните и всё норм будет.
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
24 сент. 2020, в 09:09
2000 руб./за проект
24 сент. 2020, в 08:35
50000 руб./за проект
24 сент. 2020, в 08:23
10000 руб./за проект