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

Question

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>

Answer 1

Try like this for Vue3:
import { createApp } from "vue";
createApp(App)
.use(VueAxios, axios)
.use(router)
.mount('#MyApp')