Setting Up Global Components in Vue 3 with Vite and TypeScript

How to Set Up Global Components in Vue 3 with Vite and TypeScript

In modern web development, creating reusable and globally accessible components is a game-changer for enhancing productivity and maintaining clean, efficient codebases. Reusing components across multiple application parts is paramount for efficiency and maintainability.

This is where global components shine. By making components accessible everywhere without explicit imports, you streamline development, enhance code reusability, and improve project structure.

This guide delves into the practicalities of setting up global components in a Vue 3 project using Vite as your build tool and TypeScript for robust type safety. Keep reading to explore effective strategies, best practices, and potential pitfalls to ensure you know how to make the full potential of global components in your Vue 3 applications.

Introduction to Vue 3 and Vite

Vue 3 is the latest major version of Vue, a popular JavaScript framework for building user interfaces. It brings numerous performance improvements and new features, making it a powerful tool for developers.

Conversely, Vite is a build tool designed to provide a faster and leaner development experience. Together, they form a robust foundation for modern web applications.

Global components in Vue allow you to define a component once and use it throughout your application without needing to import it each time. This not only saves time but also helps maintain a cleaner codebase.

Step-by-Step Guide to Set Up Global Components in Vue 3 with Vite and TypeScript

Follow the below steps to set up global components in Vue 3 with Vite and typescript:

Step 1: Setting Up Your Vue 3 Project with Vite

You’ll first create a Vue 3 project using Vite to get started. Open your terminal and run the following command:

npm create vite@latest

When prompted, select “Vue” as your framework and choose “TypeScript” for type safety. Once your project is created, navigate to the project directory and install the necessary dependencies with:

npm install

Next, start your development server:

npm run dev

Your application will now be accessible at

http://localhost:5173/

Step 2: Installing Ant Design Vue

Now, let’s add Ant Design Vue to your project. Run the following command to install it:

npm install ant-design-vue

Step 3: Declaring Global Components

To make Ant Design components available globally across your application, modify your src/main.ts file as follows:

import { createApp } from 'vue';

import './style.css';

import App from './App.vue';

import antd from 'ant-design-vue';

import 'ant-design-vue/dist/reset.css';

createApp(App).use(antd).mount('#app');

In this example, we import the Ant Design Vue plugin and declare it a global one. This allows every component within App.vue to access Ant Design components without needing to import them individually.

Step 4: Creating a Global Component

Next, create a global component using Ant Design. Inside the components folder, create a new file named ExampleParagraph.vue and add the following code:

<template>

  <a-typography-paragraph type="danger">

    <slot></slot>

  </a-typography-paragraph>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

export default defineComponent({});

</script>

This component renders content in red using Ant Design’s TypographyParagraph component. You can now use this component across your application.

Step 5: Using the Global Component

To use the ExampleParagraph component globally, update your App.vue file:

<template>

  <example-paragraph>This is my example paragraph</example-paragraph>

</template>

<script lang="ts">

import { defineComponent } from 'vue';

export default defineComponent({});

</script>

Step 6: Adding TypeScript Detection for Global Components

While global components are convenient, they can cause issues with TypeScript detection. To resolve this, we’ll use the unplugin-vue-components package. Install it with:

npm install unplugin-vue-components

Then, update your vite.config.ts file:

import { defineConfig } from 'vite';

import vue from '@vitejs/plugin-vue';

import Components from 'unplugin-vue-components/vite';

import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({

  plugins: [

    vue(),

    Components({

      resolvers: [AntDesignVueResolver()],

      dts: true,

      include: [/\.vue$/, /\.vue\?vue/, /\.md$/],

    }),

  ],

});

Ensure TypeScript recognizes your components by adding the generated components.d.ts file to your tsconfig.json:

{

  "include": [

    ...,

    "components.d.ts"

  ]

}

Conclusion

Setting up global components in Vue 3 with Vite and TypeScript enhances productivity and ensures a scalable and maintainable codebase. Following the steps outlined in this guide, you’ve learned how to integrate Ant Design Vue, declare global components, and enhance them with TypeScript detection.

This setup provides a solid foundation for developing modern, efficient Vue applications that are easy to maintain and extend. Whether you’re building small projects or large-scale applications, mastering the art of global components in Vue 3 will undoubtedly streamline your development process.

Irtiza Hussain

Senior Software Engineer