Problem with vue-router, not render my components and no errors - vuejs2

js and have a problem to use vue-router, my component isn't rendered and console show no errors, follow my code:
router config (/router/index.js):
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '#/pages/Home/Home.vue'
import NewUser from '#/pages/NewUser/NewUser.vue'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: Home.default },
{ path: '/NewUser', component: NewUser.default }
]
export default new VueRouter({
routes
})
main.js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import 'primevue/resources/themes/nova-light/theme.css'
import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css'
import Vuelidate from 'vuelidate'
import Card from 'primevue/card'
import InputMask from 'primevue/inputmask'
import Button from 'primevue/button'
import Sidebar from 'primevue/sidebar'
import InputText from 'primevue/inputtext';
import Message from 'primevue/message';
Vue.config.productionTip = false
Vue.use(Vuelidate)
Vue.component('Card', Card)
Vue.component('InputMask', InputMask)
Vue.component('Button', Button)
Vue.component('Sidebar', Sidebar)
Vue.component('InputText', InputText)
Vue.component('Message', Message)
new Vue({
router: router,
render: h => h(App),
}).$mount('#app')
app.vue:
<template>
<Fragment id="app">
<Header />
<router-view />
<Footer />
</Fragment>
</template>
<script src="./App.js"></script>
<style src="./App.css"></style>
my router-links is in header component, follow the github repository with the projetc:
https://github.com/juniorjrjl/weblib-front
thank you
[edited]
link removede because i solved part of problem and finally get error message
[edited]
I remove a link because not generate error in a link and I finally get error message after remove '.default' in my routes
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick:
"NotFoundError: Failed to execute 'insertBefore' on 'Node': The node
before which the new node is to be inserted is not a child of this
node."
vue.runtime.esm.js?2b0e:1888 DOMException: Failed to execute
'insertBefore' on 'Node': The node before which the new node is to be
inserted is not a child of this node.
at HTMLBodyElement.n.insertBefore (webpack-
internal:///./node_modules/vue-fragment/dist/vue-
fragment.esm.js:5:1609)
at HTMLDivElement.e.insertBefore (webpack-
internal:///./node_modules/vue-fragment/dist/vue-
fragment.esm.js:5:1293)
at Object.insertBefore (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5699:14)
at insert (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6029:19)
at createComponent (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5976:9)
at createElm (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:5915:9)
at updateChildren (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6206:11)
at patchVnode (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6309:29)
at VueComponent.patch [as __patch__] (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:6472:9)
at VueComponent.Vue._update (webpack-
internal:///./node_modules/vue/dist/vue.runtime.esm.js:3942:19)

If you need to have a fallback route when the path does not match any component then do this.
const Foo = { template: "<div>foo</div>" };
const Bar = { template: "<div>bar</div>" };
const NotFound = { template: "<div>Page not found</div>" };
Vue.config.productionTip = false;
Vue.use(VueRouter);
const routes = [
{ path: "/NewUser", component: Bar },
{ path: "/", component: Foo },
{ path: "*", component: NotFound }
];
Working implementation attached.
If you want to create nested router-views then read on it here:
https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views

Changing your route did the trick for me. For default routing the syntax is different (see more https://router.vuejs.org/guide/essentials/named-views.html#nested-named-views)
const routes = [
{ path: '/', component: Home },
{ path: '/NewUser', component: NewUser }
]

Related

Why do I see a previous route component when using vue router 3 navigation?

Let's say we have 3 routes and for the sake of making it simple, they're just referred to as 1, 2, and 3.
When I navigate to route 1 -> route 2 -> route 3 -> route 1, route 2 shows between the navigation from route 3 -> route 1. I can't for the life of me figure out why that's happening.
Routes file is like:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Route1 from '../views/Route1';
import Route2 from '../views/Route2';
import Route3 from '../views/Route3';
Vue.use(VueRouter);
const routes = [
{
path: '/route1',
name: 'Route1',
component: Route1
},
{
path: '/route2',
name: 'Route2',
component: Route2
},
{
path: '/route3',
name: 'Route3',
component: Route3
}
];
const router = new VueRouter({
mode: 'history',
base: '/',
query: {
t: window.token
},
routes
});
export default router;
main.js
import 'sass/main.scss';
import moment from 'moment';
import Vue from 'vue';
import { mapActions, mapState } from 'vuex';
import App from './App.vue';
import api from './plugins/api.js';
import vuetify from './plugins/vuetify';
import router from './router';
import store from './store';
Vue.prototype.$moment = moment;
Vue.use(api);
Vue.config.productionTip = false;
new Vue({
computed: {
...mapState
},
methods: {
...mapActions
},
router,
store,
vuetify,
watch: {
$route() {
try {
// ... some action(s) on route change - removed here
} catch (error) {
// ... error handling removed
}
}
},
render: h => h(App)
}).$mount('#app');
App.vue
<template>
<v-app>
<!-- header/app bar removed here -->
<v-main>
<v-progress-linear
v-if="loading"
color="primary lighten-2"
height="2"
indeterminate
/>
<router-view v-else />
</v-main>
<!-- footer removed here -->
</v-app>
</template>
Kind of dumb, but I'll put it out there anyway. My components were rendering dynamic components that were in the store... upon navigating to a new route I just had to clear the stored component array while the new component array was fetched from the API. So when going back to another route it was first seeing a flash of the old array of dynamic componets.

Vue Router import not working with require

I'm setting up a brand new Vue 2 project. Due to compatibility issues with one of the libraries I need to use, I can't yet move to Vue 3.
I have a very basic setup at the moment, folder structure something like this:
/
App.vue
main.js
router.js
/pages
AboutUs.vue
Home.vue
If I don't use Vue Router, and just import the AboutUs page into App.vue and call its tag in the template, it displays as expected.
When I instead use the Vue Router to render it in the <router-view /> tag in App.vue, I get the error message:
[Vue warn]: Failed to mount component: template or render function not defined.
I suspect that means I'm doing something wrong in the router but I can't see what.
main.js
import Vue from 'vue'
import App from './App.vue'
import router from 'router.js'
new Vue({
render: h => h(App),
router
}).$mount('#app')
App.vue
<template>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/About">About</router-link>
<router-view />
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const About = require('../pages/AboutUs')
const Home = require('../pages/Home')
const routes = [
{
path: '/about',
name: 'About',
component: About
},
{
path: '*',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
linkExactActiveClass: '',
routes
})
export default router
About.vue
<template>
<div>
<h1>About</h1>
</div>
</template>
<script>
export default {
}
</script>
es6 import
Try to use an es6 import instead of require:
import About from '../pages/AboutUs'
import Home from '../pages/Home'
Then your route syntax will work as is. This is because when you use require, you get the whole module rather than the Component export from the module.
-or-
require
Alternatively, if you wanted to continue using require, you would need the following syntax, using the default property of the module:
const About = require('../pages/AboutUs')
const Home = require('../pages/Home')
const routes = [
{
path: '/about',
name: 'About',
component: About.default
},
{
path: '*',
name: 'Home',
component: Home.default
}
]

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. (Vue-router)

I am having an issue while adding routes in Vue using Vue-router. I know it is a warning but still, I need to solve this issue, so your help will be appreciated. I am working with laravel vue and I am beginner.
I tried almost every StackOverflow link to remove this warning but failed. Below you can see my code.
app.js
window.Vue = require('vue');
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import moment from 'moment'
import $ from 'jquery'
import 'datatables.net'
import routes from './components/includes/routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(VueMaterial)
import App from './components/views/App'
Vue.filter('formatDate', function(value) {
if (value) {
return moment(String(value)).format('L (LT)')
}
});
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('app-component', require('./components/views/App.vue').default);
Vue.component('donations-component', require('./components/views/Donations.vue'));
Vue.component('needy-component', require('./components/views/Needy.vue'));
var router = new VueRouter({
routes: routes,
mode: 'history'
})
const app = new Vue({
el: '#app',
components: { App },
router,
});
routes.js
import Needy from '../views/Needy'
const routes = [
{
path: '/home',
name: 'donations',
component: Donations,
},
{
path: '/needy',
name: 'needy',
component: Needy,
},
];
export default routes
App.vue
<div class="page-container md-layout-column">
<md-toolbar class="md-primary">
<md-button class="md-icon-button" #click="showNavigation = true">
<md-icon>menu</md-icon>
</md-button>
<span class="md-title">My Title</span>
<div class="md-toolbar-section-end">
<md-button #click="showSidepanel = true">Favorites</md-button>
</div>
</md-toolbar>
<md-drawer :md-active.sync="showNavigation" md-swipeable>
<md-toolbar class="md-transparent" md-elevation="0">
<span class="md-title">My App name</span>
</md-toolbar>
<md-list>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'donations' }" class="md-list-item-text">Donations</router-link>
</md-list-item>
<md-list-item>
<md-icon>move_to_inbox</md-icon>
<router-link :to="{ name: 'needy' }" class="md-list-item-text">Needy</router-link>
</md-list-item>
</md-list>
</md-drawer>
<md-content>
<router-view></router-view>
</md-content>
</div>
</template>
<script>
export default {
data (){
return {
showNavigation: false,
showSidepanel: false
}
}
}
</script>
<style lang="scss" scoped>
</style>
Error in browser console
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the
parent component re-renders. Instead, use a data or computed property based on the prop's value.
Prop being mutated: "to"
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $attrs is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root> vue.js:597:15
[Vue warn]: $listeners is readonly.
found in
---> <RouterLink>
<MdRipple> at src/components/MdRipple/MdRipple.vue
<MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
<MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
<MdList> at src/components/MdList/MdList.vue
<MdDrawer> at src/components/MdDrawer/MdDrawer.vue
<AppComponent> at resources/js/components/views/App.vue
<Root>

Jest : How to mock vue-router used in vuex

I tried to use vue-router inside actions of vuex, which is working fine at localhost.
However, i got errors when I tried to prepare store(for mock) by importing "actions" from store file.
Could you help me out in this issue?
versions
vue-test-utils: 1.0.0-beta.16
yarn: 1.5.1
vuejs: 2.5.13
vue-jest: 1.4.0
error msg
FAIL test/components/main.test.js
● Test suite failed to run
/Users/gulliver/Desktop/test/vue-test-utils-jest-example/node_modules/vue/dist/vue.esm.js:10809
export default Vue$3;
^^^^^^
SyntaxError: Unexpected token export
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
at Object.<anonymous> (src/router/main.js:1:203)
at Object.<anonymous> (src/store/main.js:3:13)
Test Suites: 1 failed, 1 total
Tests: 0 total
Snapshots: 0 total
Time: 2.354s
Ran all test suites matching /test\/components\/main.test.js/i.
error An unexpected error occurred: "Command failed.
Exit code: 1
app/src/main.js
import Vue from "vue/dist/vue.esm";
import App from './App.vue'
import store from './store/main.js';
import router from './router/main.js';
new Vue({
el: '#app',
render: h => h(App),
store,
router,
})
app/src/store/main.js
import Vue from "vue";
import Vuex from 'vuex';
import router from '../router/main.js'
Vue.use(Vuex)
export const actions = {
locationTo(context, url){
router.push(url)
}
}
export default new Vuex.Store({
actions,
})
app/src/router/main.js
import Vue from "vue/dist/vue.esm";
import VueRouter from 'vue-router';
import root from '../components/root.vue';
import hoge from '../components/hoge.vue';
Vue.use(VueRouter)
export const routes = [
{ path: '/', component: root},
{ path: '/hoge', component: hoge},
];
export default new VueRouter({
mode: 'history',
routes
})
app/test/components/main.test.js
import Vue from "vue";
import Vuex from "vuex";
import { shallowMount, createLocalVue } from "#vue/test-utils";
import { actions } from "#/store/main"; //NOTE: this causes error
import _ from "lodash";
const localVue = createLocalVue();
import root from '#/components/root.vue'
import hoge from '#/components/hoge.vue'
describe('increment.vue', () => {
let propsData;
let store;
let wrapper;
beforeEach(() => {
propsData = _.cloneDeep(personObject)
store = new Vuex.Store(_.cloneDeep({
actions,
}))
const $route = {
path: '/hoge', components: hoge
}
wrapper = shallowMount(root, {
localVue,
propsData,
store,
use: ['Vuex'],
stubs: ['router-view'],
mocks: {
$route
}
})
});
it('test:router in store', () => {
// check if URL changed after action executed
});
})
components
// App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
// root.vue
<template>
<div>
<p>root component</p>
</div>
</template>
<script>
export default {
mounted () {
this.$store.dispatch('locationTo', '/hoge')
},
}
</script>
// hoge.vue
<template>
<div>
<p>hoge template</p>
</div>
</template>
This error is related to the fact that Jest runs in a Node.js environment, and you are using export default, which does not work by default in Node.js (Node uses module.exports). I guess you are using webpack for your dev/production build, but not for the test environment.
Are you using Jest? If so, you will need to set up babel-jest so Jest knows how to read ES Modules syntax (import/export).
Read more here: https://vue-test-utils.vuejs.org/guides/#testing-single-file-components-with-jest
This can be annoying to set up, let me know if you need more help to get it working.

Failed to mount component: template or render function not defined

I'm trying to use vue-router to display routed components below my navbar component but I get an error specified in the title.
Here is my code:
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import app from './app';
Vue.use(VueRouter);
const foo = {
template: '<div>foo</div>',
};
const bar = {
template: '<div>bar</div>',
};
const routes = [
{
path: '/',
component: foo,
},
{
path: '/bar',
component: bar,
},
];
const router = new VueRouter({
mode: 'history',
routes,
});
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(app),
});
app.vue
<template>
<div id="app">
<fs-navbar/>
<main>
<router-view/>
</main>
</div>
</template>
<style scoped lang="scss">
</style>
<script>
import fsNavbar from './components/fs-navbar';
export default {
components: {
fsNavbar,
},
};
</script>
components/fs-navbar.vue
<template>
<nav>...</nav>
</template>
<style scoped lang="scss">
</style>
<script>
import Vue from 'vue';
export default Vue.component('fs-navbar', {
// logic
});
</script>
This app causes an error:
vue.js?3de6:2574[Vue warn]: Failed to mount component: template or render function not defined. (found in component <fs-navbar>)
If I add fs-navbar template directly into app.vue's template everything is working as intended. Without router app is working as well.
I'm using vue-cli with this template(vuejs2)
Smilar problem, when I write:
let routes = [{
path: '/',
component: require('./components/member.vue')
}]
it failed:[Vue warn]: Failed to mount component: template or render function not defined.
add ".default", it works!
let routes = [{
path: '/',
component: require('./components/member.vue').default
}]
PS:"vue": "^2.5.2","vue-router": "^3.0.1""vue-loader": "^13.3.0",
https://github.com/vuejs/vue-loader/releases/tag/v13.0.0
Turns out, that Vue.component() return value isn't working with the router.
When changed:
export default Vue.component('component-name', {})
to:
export default {}
Everything is working fine.