<router-view> in laravel 5.6 and vue.js don't work - laravel

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\.-]*');

Related

Default route is not working with laravel and vue

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'
}

How can add a button count on my component VueJS

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.

Child routes are still only loading parent component

So I'm trying to create a a settings page that has child routes. For example, I want to have /settings/user, then /settings/branches, etc. However, everytime I load /settings or any of its child routes it only shows the parent Settings component.
Here is my routes.js file
// Imports
import Vue from 'vue';
import VueRouter from 'vue-router';
import Store from './store';
// Set to use
Vue.use(VueRouter);
// Views
import Home from './views/Home/';
import UserIndex from './views/UserIndex';
// Grab Routes
import Settings from './routes/Settings'
// Create our routes
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
},
].concat(Settings);
Here is my Settings.js (which is later contacted in my main routes folder)
// Routes for /Settings/
import Settings from '../views/Settings/';
import Branches from '../views/Settings/Branches';
const routes = [
{
path: '/settings',
name: 'settings',
component: Settings,
children: [
{
name: 'branches',
path:'branches',
component: Branches
}
]
}
]
export default routes;
/views/settings/Branches.vue
<template>
<div>
<p>Branches page</p>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
/views/settings/index.vue
<template>
<div>
<p>settings page</p>
</div>
</template>
<script>
export default {
components: {
}
}
</script>
Just include <router-view></router-view> to settings page, so it can render its own children. Then you can navigate to it through /settings/branches link.
Reference
<template>
<div>
<p>Settings page</p>
<router-view></router-view>
</div>
</template>

How correctly include VueRouter in Laravel Project?

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.

Components are not loading while history mode in vue js in laravel

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

Resources