Using the unplugin-auto-import/vite plugin in Vue 3.

Jul 22, 2023366

AI Translation

This post is translated from Chinese into English through AI.View Original

AI-generated summary

This text provides instructions on how to automatically import dependencies in a Vue.js project using the unplugin-auto-import package. It explains the installation process, configuration in the vite.config.ts file, and the inclusion of a d.ts file. It also mentions the configuration in the tsconfig.json file to prevent errors in Vue files. The text includes a code example and an image.

Automatic Import

Installation#

npm i -D unplugin-auto-import

Configuration#

Configure in vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"],
      dts: true,
    }),
  ],
});

After setting dts:true, a auto-imports.d.ts file will be generated in the current path.

Note: You can also specify a path.

Configure in tsconfig.json

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./**.d.ts"   *****This line
],

The purpose of this configuration is to prevent red lines in vue files, although it does not affect the execution.

Effect#

<template>
  <div>
    <button @click="num += 1">+</button>
  </div>
  <div>
    {{ num }}
  </div>
</template>

<script setup lang="ts">

const num = ref(30);

</script>