I have made a simple blog in vue.js to practice vue.js. I have installed a router and now it doesnt wanna show anything on the localhost. Im using directories views where i put files to show, components are for now empty. router is an own directory with a file index.js where i connect the router. (I have not included the style in this message)

Here is the error in the console:

    app.js:378 Uncaught TypeError: Cannot read properties of undefined (reading 'use')
        at eval (index.js?5aa4:6:1)
        at ./src/router/index.js (app.js:96:1)
        at __webpack_require__ (app.js:375:33)
        at fn (app.js:609:21)
        at eval (main.js:4:65)
        at ./src/main.js (app.js:85:1)
        at __webpack_require__ (app.js:375:33)
        at app.js:1497:109
        at __webpack_require__.O (app.js:421:23)
        at app.js:1498:53

Here is the app.vue;

    <template>
      <div >
        <div>
          <img  src="@/assets/bloglogo.jpg">
        </div>
        <div >
            <navbar >
                    <ul >
                        <div ><router-link to="/homePosts">Home</router-link</div>
                        <div ><router-link to="/writePost">Write a post</router- 
                        link></div>
                    </ul>
            </navbar>
        </div>   
        <div>
          <router-view></router-view>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: "App", 
    }
    </script>

here is the main.js;

        import { createApp } from 'vue'
        import App from './App.vue'
        import router from './router'
        
        createApp(App).use(router).mount('#app')
    

here is the index.js inside the router directory

        import vue from 'vue'
        import home from '../views/homePosts'
        import writePost from '../views/writePost'
        import { createRouter, createWebHistory } from 'vue-router'
        
        vue.use(createRouter,createWebHistory)
        const routes = [
            {
                name: 'Home',
                component: home,
                path: '/'
            },
            {
                name: 'writepost',
                component: writePost,
                path: '/writePost'
            }
            
        
        ];
        
        const router = createRouter({
            history: createWebHistory(),
            routes
        })
        
        export default router

one of the view files;

    <template>
    <div >
        <h1>Blog Posts</h1>
        <div > 
            <div >
                <img  src="@/assets/person1.jpg">
                <h4>Blog headline here</h4>
                <h6>Writer name</h6>
            </div>
            <div>
                <h5 >Lorem 
                </h5>
            </div>
            <div >
                <h6 >Read more..</h6>
            </div>
        </div>
    </div>
    </template>
    
    <script>
     export default {
        name: 'homePosts'
     }
    </script>

CodePudding user response：

Why are you using vue.use(createRouter,createWebHistory) in your router file?

index.js - router directory

    import { createRouter, createWebHistory } from 'vue-router'
    
    const routes = [
        {
            name: 'Home',
            component: () => import('../views/homePosts'),
            path: '/'
        },
        {
            name: 'writepost',
            component: () => import('./views/writePost'),
            path: '/writePost'
        }
        
    
    ];
    
    const router = createRouter({
        history: createWebHistory(),
        routes
    })
    
    export default router

It will be much healthier if you remove the line you use vue.use(createRouter,createWebHistory) and import the components in this way. And I believe that this way the problem will be solved.

If you are wondering why we imported the components this way, I suggest you read this source (Lazy Loading).