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'
}
Related
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 starting learn VueJS and i can't add my button count on my component, i'm work with laravel !
My app.js:
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'
let routes = [
{
path: '/',
component: Home
},
];
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});
My HomeComponent.vue:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-body">
<h1 class="card-tite">Bienvenue sur mon site</h1>
<button-counter></button-counter>
</div>
</div>
</div>
</div>
</template>
I add a div "app" and on this i add a <router-view><router-view> :)
My console VueJS say me :
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
As told in the error message, you have to register your component, before using it. Have a look on this article to read more about it.
In your example, you have to move the Vue.component('button-counter', { ... }) part in from of your app initialize. It is just another component (similar to your HomeComponent) that is defined.
Change your app.js like this:
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'
let routes = [
{
path: '/',
component: Home
},
];
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});
... and your example should work properly.
Have a look at this running fiddle with your example.
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.
I do not know what I'm doing wrong, but my router-view does not work.
I have an app based on Laravel 5.6 and I want to make views through vue.js.
Components "Navbar" and "Foot" are load correctly but I don't see "Home" component which should be load by in App.vue
Routing also does not work. When I type in the browser /about I get an error "Sorry, the page you are looking for could not be found."
Below my files:
App.vue
<template>
<div class="app">
<Navbar/>
<router-view></router-view>
<Foot/>
</div>
</template>
<script>
export default {
name: 'App',
data () {
return{
}
}
}
</script>
Home.vue
<template>
<div class="home">
<h1>Home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {
}
}
}
</script>
About.vue
<template>
<div class="about">
<h1>O nas</h1>
</div>
</template>
<script>
export default {
name: 'About',
data (){
return{
}
}
}
</script>
app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
window.Vue = require('vue');
Vue.use(VueRouter);
Vue.use(Vuex);
let AppLayout = require('./components/App.vue');
// home tempalte
const Home = Vue.component('Home', require('./components/Home.vue'));
// About tempalte
const About = Vue.component('About', require('./components/About.vue'));
// register components
const Navbar = Vue.component('Navbar', require('./components/Navbar.vue'));
const Foot = Vue.component('Foot', require('./components/Foot.vue'));
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
name: 'About',
path: '/about',
component: About
}
];
const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(
Vue.util.extend(
{ router },
AppLayout
)
).$mount('#app');
You need to teach laravel's router how to play along with vue's.
Check out this link: https://medium.com/#piethein/how-to-combine-vuejs-router-with-laravel-1226acd73ab0
You need to read around where it says:
Route::get('/vue/{vue_capture?}', function () {
return view('vue.index');
})->where('vue_capture', '[\/\w\.-]*');
When I changed mode to history, the hash from the URL is removed, but components are not loading. This is app.js:
window.Vue = require('vue');
import VueRouter from 'vue-router';
var index = Vue.component('index',
require('./components/frontend/testingIndexComponent.vue'));
var component1 = Vue.component('component1',
require('./components/frontend/testingComponent.vue'));
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: index },
{ path: '/component1', component: component1 }
]
})
const app = new Vue({
router
}).$mount('#app')
this is web.php
Route::get('/{vue_capture?}', function () {
return view('index4');
})->where('vue_capture', '[\/\w\.-]*');
this is index4.blade.php
<body>
<div>
<h1>Header</h1>
<!-- <a><router-link tag="li" to="projects">
sdds
</router-link></a> -->
</div>
<div id="app">
<a><router-link to="component1">
sddsdadadssa
</router-link></a>
<router-view>
</router-view>
</div>
<div>
<h1>Footer</h1>
</div>
<script type="text/javascript" src="{{URL::to('public/js/app.js')}}">
</script>
remove
mode: 'history'
and use
hashbang: false,
history: true
instead