Develop Reference

[Vue warn]: Failed to resolve component: router-view in Laravel

working with vue 3 and laravel project. when I load welcome.blade.php it is viewing only mainapp.vue as well and not visible other vue.js files. inspector encounting following error message
[Vue warn]: Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at <Mainapp> at <App>
my app.js
require('./bootstrap');
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
createApp({
components: {
mainapp,
}
}).mount('#app');
router.js
import firstPage from './components/pages/myFirstVuePage.vue';
import newRoutePage from './components/pages/newRoutePage.vue';
import { createRouter, createWebHistory } from "vue-router";
const ROUTES = {
MyNewVueRoute: {
path: '/my-new-vue-route',
name: 'MyNewVueRoute',
component: firstPage
},
NewRoutePage: {
path: '/new-route-page',
name: 'NewRoutePage',
component: newRoutePage
}
}
const router = createRouter({
history: createWebHistory(),
routes: [
// feel free to add more routes here (yeah, and your root '/' route too :) )
{
path: ROUTES.MyNewVueRoute.path,
name: ROUTES.MyNewVueRoute.name,
component: ROUTES.MyNewVueRoute.component
},
{
path: ROUTES.NewRoutePage.path,
name: ROUTES.NewRoutePage.name,
component: ROUTES.NewRoutePage.component
},
]
});
export default router;
how could I fix this problem?

import { createApp } from "vue";
createApp(App)
.use(VueAxios, axios)
.use(router)
.mount('#MyApp')

finaly I got app.js like this way now it is working fine
require('./bootstrap');
import router from './router'
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
createApp({
components: {
mainapp,
}
}).use(router).mount('#app');

TypeError: undefined is not an object (evaluating 'vue__WEBPACK_IMPORTED_MODULE_0__["default"].component')

I'm getting the error at Vue.component. I've tried searching the web and couldn't find any working fixes on SO or google.
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from './Index.vue'
import Login from './Login.vue'
Vue.component(`index`, Index);
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', component: Login },
]
})
new Vue({
el: '#app',
router: router,
render: h => h(Router)
})

Migrating Vue 2 to Vue 3, typeError: Vue is not a constructor

How can I migrate my Vue 2 syntax to Vue 3, because I'm receiving the following error:
TypeError: Vue is not a constructor.
Right now I'm using Vue 3:
let app;
firebase.auth().onAuthStateChanged(user => {
console.log("user", user);
if (!app) {
app = new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
}
});
To
import { createApp } from "vue";
const app = createApp({
});
app.mount("#app");

The equivalent of your code in Vue 3, Vuex 4, Vue Router 4 would be something like:
import { createApp } from 'vue'
import store from './store'
import router from './router'
import App from './App.vue'
let app;
firebase.auth().onAuthStateChanged(user => {
console.log("user", user);
app = createApp(App);
app.use(store);
app.use(router);
app.mount("#app");
});
The store syntax is slightly different in store.js:
import { createStore } from 'vuex'
// now uses `createStore`
export default createStore({
state: {},
getters: {},
mutations: {},
actions: {}
})
And the router in router.js:
import { createWebHistory, createRouter } from "vue-router";
import Home from "#/views/Home.vue";
import About from "#/views/About.vue";
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;

Vuejs lazy loading routes in webpack template

I have created vuejs project with vue-cli tools and webpack template.
vue init webpack my-project
I don't know how to implement lazy loading on routes with templates
currently i have two routes in router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
import Test from '#/components/Test'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/test',
name: 'test',
component: Test
}
]
})
And its imported in main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
But it doesn't contain the lazy loading implementation how can i do it??

instead of using
import Test from '#/components/Test'
use as
const Test = () => import('#/components/Test');
lazy loading Documentataion

Nice way to do this:
function load (component) {
return () => import(`#/${component}.vue`)
}
...
routes: [
{ path: '/', component: load('Hello') },

How update component after click and url change?

I try use vue-router, but something went wrong.
On page rendered router-link, by click url changed. localhost/#/ -> localhost/#/contacts but component steal main page. Update only if page reload.
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: Routes
});
window.onload = () => {
new Vue({
router: router,
el: '#app-container',
data: {
currentRoute: window.location.hash.split('#')[1]
},
computed: {
ViewComponent () {
return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
}
},
render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
});
}
route.js
const routes = [
{path: '/', component: mainPage},
{path: '/example1', component: examplePage},
{path: '/example2', component: exampleForm},
{path: '/contacts', component: contacts}
];
export default routes
index.vue
<template lang="jade">
div(id="app")
router-link(to="/example1") Example1
br
router-link(to="/example2") Example2
br
router-link(to="/contacts") Contacts
</template>
<script type="text/javascript">
export default {
}
</script>

I fix problem by add
watch: {
'$route'(to, from) {
this.$router.go(this.$router.currentRoute)
}
}
for main.js, but i think this is very bad solution.

you are missing router-view. this is the component responsible to render the component that the router needs to display
please consider this code structure based on official boilerplate:
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
index.vue
<template>
<div id="app">
<router-view/>
<router-link to="example1">example1</router-link>
<router-link to="example2">example2</router-link>
</div>
</template>
index.js (like your route.js)
import Vue from 'vue'
import Router from 'vue-router'
import example1 from '#/components/example.vue'
import example2 from '#/components/example2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/example-1',
name: 'example-1',
component: example1
}
{
path: '/example-2',
name: 'example-2',
component: example2
}
]
})