I use Laravel7, vue#2.6.11, #vue/cli 4.1.1
In this configuration, the following happens:
When I click on the "formula" route, the transition occurs and the page is render.
And if I refresh the page, the page not render content of the component "formula".
How do I make the page render when I log in
to the website on the formula page?
app.js
import App from './components/App.vue';
import Vue from 'vue';
import router from './router'
export default new Vue({
router,
render: h => h(App)
});
App.Vue
<template>
<div id="app">
<router-view></router-view>
<router-link :to="{ name: 'Formula' }">Formula</router-link>
</div>
</template>
<script>
export default{
data() {
return {
app_id: null,
}
},
}
</script>
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
import Formula from './components/formula/formula'
export default new Router({
mode: 'history',
routes: [
{path: '/formula', component: Formula, name: 'Formula'},
]
});
entry-server.js
import app from './app'
import router from './router';
new Promise((resolve, reject) => {
router.push(url);
router.onReady(() => {
const matchedComponents = router.getMatchedComponents();
if (!matchedComponents.length) {
return reject({ code: 404 });
}
resolve(app);
}, reject);
})
.then(app => {
renderVueComponentToString(app, (err, res) => {
print(res);
});
})
.catch((err) => {
print(err);
});
entry-client.js
import app from './app'
app.$mount('#app');
app.blade.php(index.html)
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<body>
{!! $ssr !!}
<script src="{{ asset('js/entry-client.js') }}" type="text/javascript"></script>
</body>
</html>
Why is this happening?
How do I fix it?
Related
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.
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
working with laravel 5.7 and vue.js my
app.js file is as following,
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
Vue.use(VueRouter)
let routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue') },
{ path: '/profile', component: require('./components/Profile.vue') }
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router
});
and I need link following link with vue file
<router-link to="/dashboard" class="nav-link">
and Dashboard.vue file is like this
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Dashboard Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
but when I click above link to dashbord.vue file it is not loading. only display url in the address bar. my console error is as following
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>
how can fix this error
You need add App.vue
<template>
<div>
<router-link to="/dashboard" class="nav-link">Dashboard</router-link>
</div>
</template>
<script>
export default {
// some code here if needed
}
</script>
and then use it in main.js
require('./bootstrap'); // maybe better use import "./bootstrap"
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from "./App.vue";
import Dashboard from './components/Dashboard.vue';
import Profile from './components/Profile.vue';
import ExampleComponent from './components/ExampleComponent.vue';
Vue.use(VueRouter)
window.Vue = Vue; // why you do that???
let routes = [
{ path: '/dashboard', component: Dashboard },
{ path: '/profile', component: Profile }
]
const router = new VueRouter({
routes // short for `routes: routes`
});
Vue.component('example-component', ExampleComponent);
new Vue({
router,
render: (h) => h(App)
}).$mount('#app');
Getting started with Vue 2 and nothing renders via vue-router. I do not receive any errors in the console, so I think I'm missing something very basic. (The app component is just the standard one that ships with the installation, so it should be fine.)
main.js
import Vue from 'vue';
import vuex from 'vuex';
import axios from 'axios';
import routes from './routes';
import VueRouter from 'vue-router';
Vue.use(vuex);
Vue.use(axios);
Vue.use(VueRouter);
let router = new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => savedPosition || { x: 0, y: 0 },
routes
});
new Vue({ router }).$mount('#app');
routes.js
import App from './App';
let routes = [
{ path: '', component: App },
{ path: '/', component: App }
];
export default routes;
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
import Hello from './components/Hello';
export default {
name: 'app',
components: {
Hello
}
};
</script>
Version
vue: 2.1.0
vue-router 2.1.1
The index.html is missing <router-view></router-view>.