Building Vue3 Component Library from Scratch #3 Environment Configuration
Tags: vue
Published: 2024-05-18 15:19:22

In this article, we will involve TypeScript into the project and manually set up a Vue3 project to test the components in the component library.

Since we are developing the Vue3 component library using Vite and TypeScript, we need to install TypeScript and Vue3. Additionally, the project will use Less for the component library's styles.

```bash
pnpm add vue typescript sass -D -w
```

To install packages in the project root directory using pnpm, you need to add the `-w` flag.

## Initializing TypeScript

Execute `npx tsc --init` in the root directory to automatically generate the TypeScript configuration file `tsconfig.json`. We will modify it later.

```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "target": "ES2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "lib": ["esnext", "dom"]
  }
}
```

For now, we make `tsconfig.json` as this. We will make adjustments later.

## Set Up Vue3 Project Base on Vite

Since we are developing a Vue3 component library, we definitely need a Vue3 project to test our component library. Therefore, we will set up a Vue3 project base on Vite to debug the components. Create a folder named `play` in the root directory and initialize it with `pnpm init`. Subsequent component debugging will be conducted in this project. Next, let's start setting up Vue3 + Vite.

### Install Plugins

We need to install Vite and `@vitejs/plugin-vue` plugin. The `@vitejs/plugin-vue` plugin is used to parse files with the `.vue` extension. Execute the following commands in the `play` directory:

```bash
pnpm add vite @vitejs/plugin-vue -D
```

## Create vite.config.ts

```javascript
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [vue()],
});
```

## Create index.html

@vitejs/plugin-vue will load the index.html under the play directory by default.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>play</title>
</head>
<body>
<div id="app"></div>
<script src="main.ts" type="module"></script>
</body>
</html>
```

Since Vite is based on ES modules, you need to add `type="module"` to the script tag.

## Create app.vue

```vue
<template>
  <div>Welcome</div>
</template>
```

## Create main.ts

```typescript
import { createApp } from "vue";
import App from "./app.vue";

const app = createApp(App);

app.mount("#app");
```

## Configure Scripts to Start the Project

Configure the scripts in `package.json`:

```json
{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.0"
  }
}
```

Since the `play` project needs to test the local component library, we need to link `play` with our component library. Modify the `pnpm-workspace.yaml` file as follows:

```yaml
packages:
  - packages/*
  - play
```

At this point, the `play` project can install the packages from the local `packages` directory.

Finally, run `pnpm run dev` to start our `play` project.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1vr9p2yw6jfamp17l4q.png)

However, there is an issue where TypeScript cannot recognize `*.vue` files, causing the compiler to show errors.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5wgr60ha56xfyb68xvy.png)

At this point, we need to create a declaration file `vue-shim.d.ts` to let TypeScript recognize `*.vue` files.

Create a `vue-shim.d.ts` file in the root directory with the following content:

```typescript
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
}
```

At this point, the error will disappear.

Now we have completed setting up a Vue3 project. We can proceed with local component debugging in this project.

The final source code: https://github.com/markliu2013/StellarNovaUI