Building Vue3 Component Library from Scratch #3 Environment Configuration

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.



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.



{
  "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:



pnpm add vite @vitejs/plugin-vue -D

Create vite.config.ts



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.



<!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



<template>
  <div>Welcome</div>
</template>

Create main.ts



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:



{
  "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:



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.

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

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:



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

Blog