Я новичок в Laravel и Vue Js. Я столкнулся с проблемой и не могу понять, в чем именно заключается проблема.
app.blade. php
<body>
<v-app id="app">
<example-component/>
</v-app>
<script src="{{ asset('js/app.js') }}"></script>
</body>
app. js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Example from './components/ExampleComponent';
new Vue({
el: '#app',
router,
vuetify
});
ExampleComponent. vue
<template>
<div>
<v-content>
<v-container>
<v-btn color="primary" link to="/foo">Foo</v-btn>
<v-btn color="primary" link to="/bar">Bar</v-btn>
</v-container>
<router-view></router-view>
</v-content>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
vuetify. js
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify)
export default new Vuetify({
})
router. js
import Vue from 'vue';
import VueRouter from 'vue-router';
const foo = {templates: '<v-alert type="success">I am Foo</v-alert>'}
const bar = {templates: '<v-alert type="success">I am Bar</v-alert>'}
Vue.use(VueRouter)
const routes = [
{
path: '/foo',
component: foo,
},
{
path: '/bar',
component: bar,
}
]
export default new VueRouter({
routes
})
Это выдаёт мне эту ошибку в консоли:
app.js:23169 [Vue warn]: Failed to mount component: template or render function not defined.
found in
---> <Anonymous>
<VContent>
<ExampleComponent> at resources/js/components/ExampleComponent.vue
<VApp>
<Root>
Мои кнопки не загружают вид роутера. Также мне хотелось бы знать, в чем разница между регистрацией компонентов с использованием import и Vue .component? Пожалуйста, помогите мне.