I try to implement VueRouter in Laravel project but arreas error Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
app.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './components/App'
import ExampleComponent from './components/ExampleComponent'
import ExampleComponent1 from './components/ExampleComponent1'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/',
component: ExampleComponent
},
{
path: '/example',
component: ExampleComponent1
}
]
})
const app = new Vue({
el: '#app',
router,
template: `<app></app>`,
components: {
App
}
})
components/App.vue
<template>
<div>
<div>
<router-link :to="'/'"></router-link>
<router-link :to="'/example'"></router-link>
</div>
<div>
<router-vue></router-vue>
</div>
</div>
</template>
<script>
export default {
}
</script>
how can I connect correctly vue-router?
I see that you've misspelled <router-view /> in App.vue which is probably causing the warning.
Related
Hello i'm new to laravel and mix. for now i'm getting through jeffrey way vue tutorial. this course caused many issues. what made me confused and somehow disappointed is new problem. in episode 26 (there) when i tried to run watch command that threw a new error:
WARNING in ./resources/assets/js/views/Home.vue?vue&type=template&id=6c0a33b2 (./node_modules/babel-loader/lib/index.js??clonedRuleSet-5.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet1.rules[3]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./resources/assets/js/views/Home.vue?vue&type=template&id=6c0a33b2) 6:30-48
export 'createStaticVNode' (imported as '_createStaticVNode') was not found in 'vue' (possible exports: default)
could anyone help me?
EDIT:
contents of project files:
route.js (assets/js):
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home')
}
];
export default new VueRouter({
routes
});
Home.vue (assets/js/views):
<template>
<div class="container">
<div class="row">
<div class="col-md-8">
<div class='panel panel-default'>
<div class="panel-heading">
Home page
</div>
<div class="panel-body">
I'm an example compnoent!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
app.js (used as entry point, saved in assets/js)
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router
})
bootstrap.js (assets/js):
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
route.js (assets/js):
import router from './routes';
You said your router file name route.js but you imported routes! Make sure your file name is correct or import correctly.
I am creating a single page application using laravel and vue. it's not loading index component on page load.
web.php
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');
Welcome.blade.php
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
router.js file
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter)
const routes = [
{ path: '/', component: require('./components/IndexComponent.vue') },
{ path: '/login', component: require('./components/LoginComponent.vue') }
]
const router = new VueRouter({
routes:routes,
mode:'history'
})
export default new VueRouter({router})
app.js file
require('./bootstrap');
window.Vue = require('vue');
import vuetify from './vuetify';
import router from './router';
import Index from './components/IndexComponent';
import Login from './components/LoginComponent';
var app = new Vue({
el: '#app',
router,
vuetify,
components: {
'index-component':Index,
'login-component':Login
}
});
Index Component (IndexComponent.vue)
<template>
<router-link to="/" class="nav-item nav-link">Home</router-link>
<router-link to="/login" class="nav-item nav-link">Login</router-link>
<router-view></router-view>
</template>
I had the same problem. Open your project in chrome and press Ctrl + Shift + I (Open console). Now after the login you can see that there is a warning which says: No match for favicon.ico. To solve this problem you go to your routes file and define a redirect:
{
path: '/favicon.ico',
redirect: '/user/dashboard'
}
there is no error in my code or console. But my router-view doesn't appear anything. I work with laravel 7 in this project
This is my app.js
// import Vue from 'vue';
import VueRouter from "vue-router";
import App from './components/App';
import Newsfeed from "./views/Newsfeed";
require('./bootstrap');
window.Vue = require("vue");
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Newsfeed },
]
const router = new VueRouter({
routes,
mode: 'history'
})
const app = new Vue({
components: {
App
},
router: router
}).$mount('#app');
This is my App.vue
<template>
<div class="flex flex-col flex-1 h-screen overflow-y-hidden">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
This is my Newsfeed.vue
<template>
<div class="flex flex-col items-center py-4">
Hello
</div>
</template>
<script>
export default {
name: "Newsfeed"
}
</script>
Can you help me? Thanks!
I need some help.
I am doing this tutorial https://www.udemy.com/share/102itcAkocdl9XTQ==/ and its not working as it should and not sure what I am doing wrong.
file structure
- components
- App.vue
- views
- Start.vue
- app.js
- bootstrap.js
- router.js
App.vue
<template>
<div>App component
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App"
}
</script>
<style scoped>
</style>
Start.vue
<template>
<div>Start View</div>
</template>
<script>
export default {
name: "Start"
};
</script>
<style scoped></style>
app.js
import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Start from './views/Start';
Vue.use(VueRouter);
export default new VueRouter({
mode: 'history',
routes: [{
path: '/',
name: 'home',
component: Start,
}]
});
Please help if you see what i am doing wrong. The Start view is not showing, when it is apparently supposed to be.
Inside your app.js, try creating the instance like this
new Vue({
el: '#app',
router,
render: h => h(App)
});
I'm experiencing a weird issue in vue. I've set up a component to view details of an item, this component accepts props and renders on first load but when i reload the page, the entire component disappears including the Root.
I've tried to name router-view but it doesn't work.
MainApp.vue
<template>
<div class="container">
<div>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</div>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s
}
.fade-enter, .fade-leave-active {
opacity: 0
}
</style>
<script>
export default{
}
</script>
Routes.js
import ViewProduct from './store/View.vue'
const routes = [
{
name: 'viewProduct',
path: 'product/:id/view/:slug',
component: ViewProduct,
props: true
}
];
export default routes;
Main.js
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import routes from './routes';
const router = new VueRouter({ mode: 'history', routes});
import MainApp from './MainApp'
import store from './store/store/index'
new Vue({
el: '#storeapp',
render: h => h(MainApp),
router,
store: store,
});
I have another router-view container which works fine but this one does not.