DEV Community

Mark
Mark

Posted on • Updated on

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


Enter fullscreen mode Exit fullscreen mode

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"]
  }
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

Create vite.config.ts



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

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


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

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>


Enter fullscreen mode Exit fullscreen mode

Create main.ts



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

const app = createApp(App);

app.mount("#app");


Enter fullscreen mode Exit fullscreen mode

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"
  }
}


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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

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

Image description

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>;
}


Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)