Add section on removing placeholder components

This commit is contained in:
Maciej Pędzich 2023-05-26 13:55:21 +02:00
parent bba4970654
commit 7dab021719

View File

@ -2,6 +2,7 @@
title: setting up vue and appwrite projects for racemash title: setting up vue and appwrite projects for racemash
description: From ESLint and Prettier configs to creating Appwrite databases and everything in between description: From ESLint and Prettier configs to creating Appwrite databases and everything in between
pubDate: 2023-05-23T18:48:00.556Z pubDate: 2023-05-23T18:48:00.556Z
lastEditDate: 2023-05-24T08:04:47.377Z
draft: false draft: false
categories: categories:
- dev diary - dev diary
@ -96,6 +97,48 @@ export default defineConfig({
}); });
``` ```
### Removing placeholder components
I first removed the `components` and `layouts` folders that were inside the `src` directory. Then I opened the `index.ts` file that was inside the `router` directory and modified to remove the, in my opinion, odd nested route declaration that technically made use of the layout components but actually didn't (you'll see why in a minute). I ended up with a router file that looked like this:
```ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from '@/views/Home.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
```
Next up was the `App.vue` file, and since it didn't have a `<RouterView />`, but instead a `<HelloWorld />` component, it never displayed the actual root route's template, which confusingly enough was the same component, but a quick look inside Vue devtools confirmed it came from the App component, and not the `Home` view.
So I removed the `HelloWorld` component import and replaced `<HelloWorld />` with `<RouterView />`, ending up with:
```vue
<template>
<v-app>
<v-main>
<RouterView />
</v-main>
</v-app>
</template>
```
Last but not least, I did the same in `Home.vue` view, but using a temporary `<h1>Hello, World!</h1>`, ran `npm run dev`, and opened the page.
![Blank web page displaying bold "Hello World" text](/racemash-app-hello-world.png)
## Appwrite project ## Appwrite project
### Setting up web client ### Setting up web client