In bootstrap.js, I have this:
window.Vue = require('vue');
window.events = new Vue();
Now I would like to use vue-router as well purely to have access to this.$route. What is the easiest way to do this? I tried to follow the official documentation, but it's so much different than what comes with laravel:
const app = new Vue({
router
}).$mount('#app')
Thank you!
First install vue-router.
Then create a new file router.js in resources/assets/js and put this code in it.
import Router from 'vue-router'
Vue.use(Router)
/*
Make sure your pages components are inside `resources/assets/js/pages` folder
*/
const Home = require('./pages/Home.vue')
const Hello = require('./pages/Hello.vue')
const NotFound = require('./pages/NotFound.vue')
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}, {
path: '/hello',
name: 'hello',
component: Hello
}, {
path: '*',
component: NotFound
}, ]
})
export default router
Now go to app.js file and insert this code:
import Vue from 'vue'
import router from './router.js'
const app = new Vue({
el: '#app',
router, // Add this to your Vue instance
//...
})
Then create your pages (Home.vue, Hello.vue and NotFound.vue in this case).
in app.js
import VueRouter from 'vue-router';
window.Vue = require('vue');
window.Vue.use(VueRouter);
import router from './config/routes';
const app = new Vue({
el: '#app',
router,
});
you could extract the code for routes definition into ./config/routes.js, see below example:
import VueRouter from 'vue-router';
const routes = [
{path: '/', redirect: '/app/articles'},
...
];
const router = new VueRouter({routes});
export default router;
Here are steps to make laravel routes and vue routes work together:
1. define your vue layout
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Project</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app"></div>
<script src="/js/app.js"></script>
</body>
</html>
2. define your laravel route to make vue-router handle url
Route::any('{all}', function(){
// welcome view should extend layout defined in step #1
return view('welcome');
})->where('all', '.*');
3. setup vue with vue-router
routes.js
import DashboardPage from './components/dashboard/dashboard.vue'
import SignupPage from './components/auth/signup.vue'
import SigninPage from './components/auth/signin.vue'
export const routes = [
{ path: '/signup', component: SignupPage },
{ path: '/signin', component: SigninPage },
{ path: '/dashboard', component: DashboardPage },
{ path: '*', redirec: '/' }
];
router.js
import VueRouter from 'vue-router';
import { routes } from './routes';
export const router = new VueRouter({
routes,
mode: 'history'
});
export default router
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import { router } from './router'
Vue.use(VueRouter);
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')
Related
How to run a function when application loads in Vue.js ? My code is like below
main.js
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
You could use mounted or created hook in the root instance :
new Vue({
router,
render: h => h(App),
mounted(){
//call the function
}
}).$mount('#app')
if the called function logic is related to the DOM use mounted or created if its logic is related to the instance properties.
There is the second warning: warning in ./src/main.js "export
'default' (imported as 'Vue') was not found in 'vue'.
It's showing me blank site, something could be wrong with router and
here is script of my App.vue (not sure about this):
import router from '#/router'
export default{ }
And here is my index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to, from, next)=>{
next();
})
export default router
And main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
new Vue({
router,
render: h => h(App)
}).$mount('#app')
I got same problem.this way can solve that.
import {createRouter, createWebHistory} from "vue-router";
const router = createRouter({
history: createWebHistory(),
routes
})
I'm new in vue,i found it in sample of vue-router.
https://codesandbox.io/s/nested-views-vue-router-4-examples-hl326?initialpath=/users/eduardo&file=/src/router.js
If using Vue router 4, do this:
...
const router = VueRouter.createRouter({
...
Basically I want to render the Login component on my Login Route but it is not rendering-
Login component-
<template>
<v-app>
<h1>Login Component</h1>
</v-app>
</template>
<script>
export default {
}
</script>
Routes.js-
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/components/Home'
import Register from '#/components/Register'
import Login from '#/components/Login'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/login',
name: 'login',
component: Login
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
this is my main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify';
Vue.config.productionTip = false
new Vue({
el:'#app',
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
I am using vue version-2.6.10 and vue router version-3.1.2..it is also not showing any error please help.
Make sure that you wrap up the router-view></router-view> in <v-content></v-content> then only your routing will work properly. Otherwise only URL will change and the respective component will not render.
I tried to create some organization in my Vue app, so I moved my router confirguration to a separate file:
# /_helpers/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import MemberDetail from '../MemberDetail';
import LoginPage from '../LoginPage';
Vue.use(VueRouter)
const routes = [
{ path: '/', component: MemberDetail },
{ path: '/login', component: LoginPage },
];
export const router = new VueRouter({routes});
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const publicPages = ['/login'];
const authRequired = !publicPages.includes(to.path);
const loggedIn = localStorage.getItem('user');
if (authRequired && !loggedIn) {
return next('/login');
}
next();
})
Then I add the exported router in my main application.js:
import Vue from 'vue/dist/vue.esm'
import App from '../components/app.vue'
import { router } from '../components/_helpers';
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: '#app',
router,
render: h => h(App)
});
})
In my App.vue, I try to display the router-view:
<template>
<div class="page-container">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
};
</script>
<style scoped>
</style>
Unfortunataly this results in the following error:
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I don't understand what's wrong... I'm adding the router to the new Vue call, so I think it should be available.
Thanks
Why wont my component load?
The root url
http://localhost:8080/
must just show Bar?
Thanks for the help
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
Vue.use(VueRouter);
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
Possible reasons are
You didn't import router properly in your code
You don't Vue.use(VueRouter), just pass it to your new Vue object parameters
Correct it like so
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'router'
import Home from './components/Home'
import Contact from '././components/Contact'
Vue.config.productionTip = false
const Bar = { template: '<div>bar</div>' }
const routers = [
{ path: '/', component: Bar },
];
let router = new VueRouter({mode: 'history', routes: routers});
new Vue({
router
}).$mount('#app')
it should work if your App.vue (imported on line 2) has <router-view /> component in its template and all other imports are valid.