Element Plus Nuxt screenshot

Element Plus Nuxt

Author Avatar Theme by Element plus
Updated: 13 Jul 2025
173 Stars

Element Plus module for Nuxt

Categories

Overview

Element Plus Nuxt is a module for Nuxt.js that enhances the functionality of the Element Plus UI library. It provides features such as automatic importing of components, styles, directives, icons, and methods. It also allows for easy customization of themes and the global namespace.

Features

  • Automatic Import: Components, styles, directives, icons, and methods are automatically imported on demand.
  • Theme Customization: Allows for easy customization of themes by specifying a list of themes to import styles for.
  • Icon Customization: Allows for customization of icon prefix name with the option to disable automatic icon importing.
  • Namespace Injection: Automatically injects the ID_INJECTION_KEY into Vue and teleport markup into the correct location in the final HTML.
  • Configuration Options: Various configuration options are available for further customization, including injection ID, append to, components, sub-components, directives, imports, no styles components, and file inclusion/exclusion.

Installation

To install Element Plus Nuxt, follow these steps:

  1. Run pnpm i to install the dependencies.
  2. Generate type stubs by running pnpm dev:prepare.
  3. Start the playground in development mode by running pnpm dev.
  4. Build the playground by running pnpm dev:build.
  5. Local preview of the playground can be done using pnpm dev:start.
  6. Build the project by running pnpm build.

Summary

Element Plus Nuxt is a powerful module for Nuxt.js that enhances the Element Plus UI library. It provides automatic importing of components, styles, directives, icons, and methods, making it easy to use and customize the UI library. With its various configuration options, it allows for further customization and flexibility. Installation of Element Plus Nuxt is straightforward and can be done using a few simple steps.