CODEWITHSUNDEEP
laravelvue.jsvuejs2vuejs3vue-router
kareem
kareem

Reputation: 59

Failed to resolve component: router-link and router-view

router-view and router-link components cannot be resolved in my app I don't know what the problem is

attached the app code it's a home page app with something like a navbar to route to the vue components like states

App\resources\js\router.js

import States from './components/States.vue'
import Cities from './components/Cities.vue'
import Areas from './components/Areas.vue'
import Addresses from './components/Addresses.vue'

const router =createRouter({
    history:createWebHistory,
    routes :[
        {
            name:'states',
            path:'/states',
            Commponent: States
        },
        {
            name:'cities',
            path:'/cities',
            Commponent: Cities
        },
        {
            name:'areas',
            path:'/areas',
            Commponent: Areas
        },
        {
            name:'addresses',
            path:'/addresses',
            Commponent: Addresses
        }
    ]
})

export default new VueRouter({
    router
});

App\resources\js\app.js

import App from './components/App.vue'
import router from './router'
import VueAxios from 'vue-axios'
import axios from 'axios'

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

App\resources\js\components\App.vue

  <div class="container">
        <h2>welcome to vue</h2>
        <div class="navbar-nav">
            <router-link to="/states">States</router-link>
            <router-link to="/cities">Cities</router-link>
            <router-link to="/areas">Areas</router-link>
            <router-link to="/addresses">Addresses</router-link>
        </div>.
        <router-view />
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

C:\Users\Kareem\App\resources\js\components\States.vue

  <h3>welcome to states component</h3>
</template>

<script>
export default {

}
</script>

<style>

</style>

Upvotes: 5

Views: 17706

Answers (1)

Nikola Pavicevic
Nikola Pavicevic

Reputation: 23510

Try like this for Vue3:

import { createApp } from "vue";

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

Upvotes: 8

Related Questions