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

Question

[Mark]

В процессе изучения 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."

Скриншот

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

Comments

[Alex]

Закиньте код в песочницу, так будет проще разобраться.

[fallus]

Vue router подключен?
Нужен код настроек роутов, чтобы понять в чём фишка.

[Mark]

fallus, подключен. Код добавил в шапку - просмотрите, пожалуйста

[fallus]

И, вы устанавливали всё это дело через vue-cli или как?

[Mark]

Alex, порекомендуете куда можно закинуть для удобства отвечающих? (первый раз во front-end)

[Alex]

Mark, Та куда хотите. Например так

[fallus]

Я бы попробовал сперва подключить роуты синхронно. Если ошибка пропадёт, то хорошо:

spoiler

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

import Login from '../views/Login'
import Register from '../views/Register'
import Home from '../views/Home'
import Categories from '../views/Categories'
import Detail from '../views/Detail'
import History from '../views/History'
import Planning from '../views/Planning'
import Profile from '../views/Profile'
import Record from '../views/Record'

Vue.use(VueRouter)

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

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

export default router

[Mark]

Alex, увы, не знаю какие файлы могут пригодится для решения, какие нет. А весь проект туда выгрузить сложновато.

Загрузил на Github: https://github.com/likont/vue-finance/tree/master/src

[Mark]

fallus, к сожалению, не помогло

Answer 1

[fallus]

В общем, всё дело в MainLayout.vue

В нём вы импортируете это:

import Navbar from '@/components/app/Navbar'
import Sidebar from '@/components/app/Sidebar'

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

Оберните и всё норм будет.