I am making a new project using Django and Vue 3 (with pinia). I am trying to set up vue router (the lastest version) and I found these instructions in the vue router website https://router.vuejs.org/guide/
// 1. Define route components.
// These can be imported from other files
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
// 2. Define some routes
// Each route should map to a component.
// We'll talk about nested routes later.
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
]
// 3. Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')
// Now the app has started!
I did something similar:
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from "./router";
import App from './App.vue'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{ path: "/", component: () => import("/src/pages/Index.vue") }
]
const router = createRouter({
history: createWebHistory(),
routes
})
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
My IDE (using PyCharm) says that router is not an acceptable parameter for app.use(). The exact message is:
Argument type Router is not assignable to parameter type Plugin<unknown[]> ... Type Router is not assignable to type (((app: App, ...options: unknown[]) => any) & {install?: PluginInstallFunction<unknown[]>}) | {install: PluginInstallFunction<unknown[]>} Type (app: App) => void is not assignable to type PluginInstallFunction<unknown[]>
I don't get any errors when I run the servers but it doesn't show my index page and always stays on App.vue.
What am I doing wrong?
App.vue file:
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<main>
<div id="app">
<div>
<form action="" @submit.prevent="onSubmit">
<div class="form-group d-flex flex-row">
<input class="form-control col-3 mx-2" placeholder="Name" v-model="student.name" />
<input class="form-control col-3 mx-2" placeholder="Course" v-model="student.course" />
<input class="form-control col-3 mx-2" placeholder="Rating" v-model="student.rating" />
<button class="btn btn-success">Submit</button>
</div>
</form>
<table class="table">
<thead>
<th>Name</th>
<th>Course</th>
<th>Rating</th>
<th>Remove</th>
</thead>
<tbody v-for="student in students" :key="student.id" @dblclick="setStudent(student)">
<td>{{ student.name }}</td>
<td>{{ student.course }}</td>
<td>{{ student.rating }}</td>
<td><btn class="btn btn-outline-danger btn-sm m-1" @click="deleteStudent(student.id)">x</btn></td>
</tbody>
</table>
</div>
</div>
<!-- <TheWelcome />-->
</main>
</template>
<script setup>
import { ref, onMounted } from "vue"
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
const blankStudent = { name: null, course: null, rating: null };
const students = ref(null);
const student = ref(blankStudent);
async function getStudents() {
const response = await fetch("http://localhost:8000/api/students/");
const data = await response.json();
students.value = data;
}
async function addStudent() {
const response = await fetch("http://localhost:8000/api/students/", {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(student.value)
});
await getStudents();
console.log("adding", response);
}
async function editStudent() {
const response = await fetch(`http://localhost:8000/api/students/${student.value.id}/`, {
method: "put",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(student.value)
});
await getStudents();
student.value = blankStudent;
console.log("adding", response);
}
function setStudent(event) {
student.value = event;
}
async function deleteStudent(id) {
const response = await fetch(`http://localhost:8000/api/students/${id}/`, {
method: "delete",
headers: { "Content-Type": "application/json" },
// body: JSON.stringify(student.value)
});
await getStudents();
}
async function onSubmit() {
if (!student.value.id) addStudent();
else editStudent();
}
onMounted(async() => {
await getStudents()
})
</script>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
and router.js file:
// import { createRouter, createWebHashHistory } from "vue-router";
//
// const routes = [
// { path: "/a", component: () => import("/src/pages/Index.vue") }
// ]
//
// const router = createRouter({
// history: createWebHashHistory(),
// routes
// })
//
// export default router
import { createWebHistory, createRouter } from "vue-router";
const HomeComponent = () =>import(/* webpackChunkName: "3420.js" */ "./pages/Index.vue");
const AboutComponent = "<div style='color: red'>About</div>";
const routes = [
{
path: "/",
name: "Home Component",
component: HomeComponent,
},
{
path: "/about-us",
name: "About Component",
component: AboutComponent,
},
]
const router = createRouter({
mode: "history",
history: createWebHistory(),
routes,
linkActiveClass: "nested-active", // active class for non-exact links.
linkExactActiveClass: "nested-active",
});
export default router;
