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

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?

CodePudding user response：

import { createApp } from "vue";

createApp(App)
  .use(VueAxios, axios)
  .use(router)
  .mount('#MyApp')

CodePudding user response：

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');