After creating a new Vue project with Vue CLI 3 and deleting all default views and components, I created two new views. None of them appears when changing url and instead I see blank page and no errors in console. In Chrome DevTools inspector I see that <div id="app"></div> is empty. Vue.js Devtools plugin doesn't trigger Vue on the page at all. I think I might miss something in my settings but can't find what can cause such behaviour.
This my main.js:
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');
This is my App.vue:
<template>
<div id="app">
<router-view />
</div>
</template>
This is index.js of router
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Auth from '../views/Auth.vue';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'home',
component: Home,
},
{
path: '/auth',
name: 'auth',
component: Auth,
},
];
const router = new VueRouter({
mode: 'history',
scrollBehavior() {
return { x: 0, y: 0 };
},
base: process.env.BASE_URL,
routes,
});
export default router;
This is vue.config.js
module.exports = {
configureWebpack: {
devtool: 'source-map',
},
chainWebpack: config => {
config.module
.rule('js')
.use('babel-loader')
.loader('vue-loader')
.tap(options => {
return options;
});
},
css: {
loaderOptions: {
sass: {
data: `
#import "#/assets/styles/variables.scss";
#import "#/assets/styles/global.scss";
`,
},
},
},
};
Home.vue:
<template>
<h1>Home page</h1>
</template>
<script>
export default {
name: 'home',
};
</script>
If you are using vue-cli you shouldn't have vue.config.js populated - as a fresh start -, hence there is a good chance your config is faulty.
Related
I am trying to set up a vue-router for an application in Vue 2/rails.
I installed vue-router through yarn =>
yarn add vue-router#2
That's my router =>
import { createWebHistory, createRouter } from "vue-router"
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const routes = [
{
path: "/",
name: "PageHome",
component: PageHome,
},
{
path: "/terms-conditions",
name: "TermsAndConditions",
component: TermsAndConditions
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
and that's my application file
import Vue from 'vue/dist/vue.esm'
import router from '../router/index'
Vue.use(router)
import PageHome from '../components/PageHome.vue'
import TermsAndConditions from '../components/TermsAndConditions.vue'
const images = require.context('../images', true)
require('../stylesheets/application.scss')
document.addEventListener('DOMContentLoaded', () => {
if(document.getElementById('v-app')) {
new Vue({
el: '#v-app',
store,
components: {
PageHome,
TermsAndConditions
}
})
}
})
I have added those lines in a file where I want to see the links.
<router-link to="/">Home</router-link>
<router-link to="/TermsAndConditions">Terms and conditions</router-link>
<router-view/>
That's what is in my package.json =>
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-router": "2",
"vue-template-compiler": "^2.6.12",
"vue-turbolinks": "^2.2.2",
Unfortunately I get this error message and I don't really know what to do with it.
Failed to compile.
./app/javascript/router/index.js 13:15-27
"export 'createRouter' was not found in 'vue-router'
Any help is very welcome !!
Can't find documentation for VueRouter2, but in VueRouter3 you have to do it like this:
import VueRouter from 'vue-router';
...
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo }
]
})
The code you send as a question is for VueRouter4 that's used with Vue3
For Vue 2 projects you have to call Router.
import Router from 'vue-router';
const router = new Router({
...
})
export default router
createRouter is for Vue 3 projects(Vue Router v4).
I am tying to port a stand alone Vue app into a larger Java Spring web project. The Vue app has Vue router as a dependency. When I try to load the main page, I am getting a [Vue warn]: Error in render: "TypeError: Cannot read property 'to' of undefined". found in ---> <RouterLink>...<AppHeader> at src/views/AppHeader.vue error in the browser console.
The main JSP loads fine, and is using a compiled JS file.
src/main.js
import Vue from 'vue';
import AppLayout from './views/Layout.vue';
import router from './router';
import Vuetify from 'vuetify';
import vueMoment from 'vue-moment';
import VueTippy from 'vue-tippy';
new Vue({
el: '#app',
router,
render: h => h(AppLayout)
});
Vue.use(VueTippy);
Vue.use(Vuetify);
Vue.use(vueMoment);
src/views/AppLayout.vue
<template>
<div id="app">
<app-header></app-header>
<section class="main-section section">
<div class="container content">
<router-view></router-view>
</div>
</section>
<app-footer></app-footer>
</div>
</template>
<script>
import AppHeader from './AppHeader.vue';
import AppFooter from './AppFooter.vue';
export default {
components: {
'app-header': AppHeader,
'app-footer': AppFooter
}
}
</script>
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import SearchForm from '../views/search/searchform.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
routes: [
{ path: '/app/path/search', component: SearchForm },
{ path: '/app/path/new', component: NewReturn },
{ path: '/app/path/home', component: SearchForm },
{ path: '/', redirect: '/app/path/search' },
{ path: '*', component: NotFound }
]
})
export default router
src/views/Appheader.vue
<template>
<div>
<router-link to="/app/path" exact>Search</router-link>
</div>
</template>
It seems like router-link is not working for some reason. I can't seem to figure out how to fix this issue. Anyone know what I am missing?
You don't need an <a> tag inside the router-link, that is rendered by vue when using <router-link>
https://router.vuejs.org/api/#router-link
The undefined 'to' will be your empty href declaration.
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
I have this weird problem with VueJs2 (cli 3) version, which is that Vue automatically removes parent path from URL.
I have following routes in routes.js file
import Home from "../views/Home";
import Login from "../views/Login";
const router = [
{
path: '/wh',
component: {
template: '<router-view></router-view>'
},
children: [
{
path: "/home",
name: "home",
component: Home
},
{
path: "/login",
name: "login",
component: Login
},
],
},
];
export default router;
And this is my router.js file
import Vue from "vue";
import Router from "vue-router";
import routes from './routes'
Vue.use(Router);
const router = new Router({
mode: 'history',
routes: routes,
scrollBehavior(to, from, savedPosition) {
return {x: 0, y: 0}
}
});
My main.js where I include router
import App from "./App.vue";
import router from "./router/router";
import store from "./store/store";
new Vue({
store,
router,
render: h => h(App)
}).$mount("#app");
And my vue.config.js
module.exports = {
devServer: {
proxy: "http://my.app.test"
},
outputDir: "public/assets/myApp/app/",
filenameHashing: true,
runtimeCompiler: true,
productionSourceMap: true,
};
The problem is following. /wh is always missing in url param. What ever I click or do I get automatically redirected to login page /wh is missing and my app is working flawlessly. I have already tried to set publicPath: '/wh' in vue.config.js and everything was working same as now. So how to properly configure my routes so I will see /wh in my URL, before other children paths?
If you need any additional information's, please let me know and I will provide. Thank you!
Add in index.html in <head> section <base href="/wh/" />
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')