feat: add installMethods

.eslintrc

@@ -3,8 +3,6 @@
     "@nuxtjs/eslint-config-typescript"
   ],
   "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "off"
-    ]
+    "@typescript-eslint/no-unused-vars": "off"
   }
 }

.vscode/launch.json

@@ -21,7 +21,7 @@
       "request": "launch",
       "cwd": "${workspaceFolder}",
       "runtimeExecutable": "pnpm",
-      "runtimeArgs": ["run", "dev"]
+      "runtimeArgs": ["run", "dev", "--preserve-symlinks"]
     }
   ]
 }

README.md

@@ -38,6 +38,11 @@ npx nuxi@latest module add element-plus
 npm i element-plus @element-plus/nuxt -D
 ```
 
+## Cinfiguration
+
+> [!WARNING]
+> At present, the method cannot automatically obtain the context, and you need to manually configure [installMethods](#installmethods) in the options.
+
 ```ts
 export default defineNuxtConfig({
   modules: [
@@ -83,6 +88,14 @@ e.g. `['dark']`
 
 Icon prefix name, disable automatically import icon with `false`.
 
+### installMethods
+
+- Type: `array`
+
+List of methods that need to be installed.
+
+e.g. `['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']`
+
 ### namespace
 
 - Type: `string`
@@ -161,6 +174,12 @@ e.g.
 ],
 ```
 
+### baseImports
+
+- Type: `array`
+
+List of imports that will be imported whether if autoImports is disabled.
+
 ### noStylesComponents
 
 - Type: `array`

src/config.ts

@@ -21,7 +21,7 @@ const allComponents = Object.entries(AllComponents).reduce<string[]>((all, [key,
 
 export const allIcons = Object.keys(AllIcons)
 
-export const allImportsWithStyle: string[] = [
+export const allMethods: string[] = [
   'ElLoading',
   'ElMessage',
   'ElMessageBox',
@@ -111,5 +111,6 @@ export const defaults: ModuleOptions = {
   exclude: defaultExclude,
   namespace: 'el',
   appendTo: [],
+  installMethods: [],
   icon: 'ElIcon'
 }

src/core/imports.ts

@@ -1,5 +1,5 @@
 import { addImportsSources } from '@nuxt/kit'
-import { allImportsWithStyle, iconLibraryName, libraryName } from '../config'
+import { allMethods, iconLibraryName, libraryName } from '../config'
 import { genIconPresets, resolvePath, toArray } from '../utils'
 import type { ModuleOptions, PresetImport } from '../types'
 import { getComponentPath } from './index'
@@ -16,10 +16,7 @@ function _resolveImports (imports: Set<PresetImport>) {
 export async function resolveImports (config: ModuleOptions) {
   const { imports, icon } = config
   const icons = icon !== false ? genIconPresets(icon) : []
-  const importsWithStyle = allImportsWithStyle.map((name) => {
-    return [name, getComponentPath(name)] as PresetImport
-  })
-  const allImports = new Set([...imports, ...importsWithStyle])
+  const allImports = new Set(imports)
   const allIcons = new Set(icons)
 
   _resolveImports(allImports)
@@ -32,7 +29,10 @@ export async function resolveImports (config: ModuleOptions) {
 
 export function resolveBaseImports (config: ModuleOptions) {
   const { baseImports } = config
-  const allBaseImports = new Set(baseImports)
+  const methodImports = allMethods.map((name) => {
+    return [name, getComponentPath(name)] as PresetImport
+  })
+  const allBaseImports = new Set([...baseImports, ...methodImports])
 
   _resolveImports(allBaseImports)
 }

src/core/index.ts

@@ -4,6 +4,7 @@ export * from './globalConfig'
 export * from './imports'
 export * from './injection'
 export * from './localePlugn'
+export * from './methods'
 export * from './options'
 export * from './styles'
 export * from './teleports'

src/core/methods.ts

@@ -0,0 +1,22 @@
+import { libraryName } from '../config'
+import type { ModuleOptions } from '../types'
+
+/**
+ * NOTE: Due to some situations where the value cannot be obtained when using getCurrentInstance in the setup function, it is currently not possible to automatically inject the context.
+ * Now let the user configure it first, and then look for a more suitable way in the future.
+ */
+export function resolveMethods (config: ModuleOptions) {
+  const { installMethods } = config
+
+  return {
+    filename: `${libraryName}-methods.plugin.mjs`,
+    getContents: () => {
+      return `import { defineNuxtPlugin, ${installMethods.join(',')} } from '#imports';
+
+export default defineNuxtPlugin(nuxtApp => {
+  ${installMethods.reduce((all, name) => `${all}.use(${name})`, 'nuxtApp.vueApp')};
+})
+`
+    }
+  }
+}

src/core/styles.ts

@@ -1,4 +1,4 @@
-import { allImportsWithStyle, libraryName } from '../config'
+import { allMethods, libraryName } from '../config'
 import { hyphenate } from '../utils'
 import type { ModuleOptions } from '../types'
 
@@ -14,7 +14,7 @@ export function getStyleDir (config: ModuleOptions, name: string) {
 
 export function resolveStyles (config: ModuleOptions, name: string) {
   const { components, noStylesComponents } = config
-  const allComponents = [...components, ...allImportsWithStyle]
+  const allComponents = [...components, ...allMethods]
 
   if (!allComponents.includes(name) || noStylesComponents.includes(name)) {
     return undefined

src/core/transformPlugin.ts

@@ -1,7 +1,7 @@
 import { createUnplugin } from 'unplugin'
 import MagicString from 'magic-string'
 import type { NuxtOptions } from '@nuxt/schema'
-import { allImportsWithStyle, libraryName } from '../config'
+import { allMethods, libraryName } from '../config'
 import {
   camelize,
   genLibraryImport,
@@ -18,7 +18,7 @@ interface PluginOptions extends TransformOptions {
 
 const componentsRegExp = /(?<=[ (])_?resolveComponent\(\s*["'](lazy-|Lazy)?([^'"]*?)["'][\s,]*[^)]*\)/g
 const directivesRegExp = /(?<=[ (])_?resolveDirective\(\s*["']([^'"]*?)["'][\s,]*[^)]*\)/g
-const importsRegExp = toRegExp(allImportsWithStyle, 'g')
+const methodsRegExp = toRegExp(allMethods, 'g')
 
 export const transformPlugin = createUnplugin((options: PluginOptions) => {
   const { include, exclude, sourcemap, transformStyles, transformDirectives } = options
@@ -49,7 +49,7 @@ export const transformPlugin = createUnplugin((options: PluginOptions) => {
         return full
       })
 
-      s.replace(importsRegExp, (full, name) => {
+      s.replace(methodsRegExp, (full, name) => {
         addStyles(transformStyles(camelize(name)))
         return full
       })

src/module.ts

@@ -11,6 +11,7 @@ import {
   resolveStyles,
   resolveTeleports,
   resolveThemes,
+  resolveMethods,
   transformPlugin,
   localePlugin
 } from './core/index'
@@ -33,13 +34,12 @@ export default defineNuxtModule<ModuleOptions>({
     nuxt.options.imports.autoImport !== false && resolveImports(options)
     nuxt.options.components !== false && resolveComponents(options)
 
-    if (options.globalConfig) {
-      addPluginTemplate(resolveGlobalConfig(options))
-    }
+    options.globalConfig && addPluginTemplate(resolveGlobalConfig(options))
 
     if (nuxt.options.ssr !== false) {
       addPluginTemplate(resolveInjection(options))
       addPluginTemplate(resolveTeleports(options))
+      options.installMethods.length && addPluginTemplate(resolveMethods(options))
     }
 
     nuxt.hook('vite:extendConfig', (config, { isClient }) => {

src/types.ts

@@ -173,4 +173,13 @@ export interface ModuleOptions extends TransformOptions {
    * ```
    */
   globalConfig?: ConfigProviderContext
+  /**
+   * List of methods that need to be installed.
+   *
+   * @example
+   * ```ts
+   * ['ElLoading', 'ElMessage', 'ElMessageBox', 'ElNotification']
+   * ```
+   */
+  installMethods: Array<'ElLoading' | 'ElMessage' | 'ElMessageBox' | 'ElNotification'>
 }

src/utils.ts

@@ -19,7 +19,7 @@ export function isVueComponent (value: any): value is Component {
 export function toArray<T extends any | any[]> (
   value: T
 ): T extends any[] ? T : T[] {
-  return isArray(value) ? value : [value] as any
+  return (isArray(value) ? value : [value]) as any
 }
 
 export function toRegExp (arr: string[], flags?: string): RegExp {