feat: add @element-plus/nuxt (element-plus#56)

fix element-plus#50
close element-plus#47
close element-plus#32
close element-plus#36
close element-plus#27
close element-plus#23

Author: tolking

README.md

@@ -4,9 +4,6 @@
 🏗 Working in Progress
 </pre>
 
-> Nuxt 3 is still beta, we may need to keep updating to adapt it.
-> It doesn't work very well yet.
-
 SSR Preview: <https://element-plus-nuxt.vercel.app/>
 
 SSG Preview: <https://nuxt-starter.element-plus.org/>

app.vue

@@ -1,10 +1,4 @@
 <script setup>
-import { ID_INJECTION_KEY } from 'element-plus'
-
-provide(ID_INJECTION_KEY, {
-  prefix: 100,
-  current: 0,
-})
 </script>
 
 <template>

components/Counter.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ElInputNumber } from "element-plus";
 const { count } = useCount();
 </script>
 

components/Examples.vue

@@ -1,7 +1,10 @@
 <template>
   <el-dropdown class="m-4" type="primary">
     <el-button type="primary">
-      Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon>
+      Dropdown List
+      <el-icon class="el-icon--right">
+        <el-icon-arrow-down />
+      </el-icon>
     </el-button>
     <template #dropdown>
       <el-dropdown-menu>
@@ -16,7 +19,7 @@
 
   <br />
 
-  <el-button class="m-4" @click="hello">Hello</el-button>
+  <el-button :icon="ElIconView" class="m-4" @click="hello">Hello</el-button>
   <el-button class="m-4" type="primary" @click="hello">Hello</el-button>
   <el-button class="m-4" type="success" @click="helloSuccess">Hello</el-button>
 
@@ -27,41 +30,28 @@
   <br />
 
   <el-icon class="cursor-pointer">
-    <Grape />
+    <el-icon-grape />
   </el-icon>
   <el-icon class="cursor-pointer">
-    <IceCream />
+    <ElIconIceCream />
   </el-icon>
   <el-icon class="cursor-pointer mb-4">
-    <IceDrink />
+    <ElIconIceDrink />
   </el-icon>
 
   <br />
 
-  <client-only>
-    <el-config-provider :locale="zhCn">
-      <el-date-picker
-        v-model="timeValue"
-        type="date"
-        placeholder="请选择日期"
-      ></el-date-picker>
-    </el-config-provider>
-  </client-only>
+  <el-config-provider :locale="zhCn">
+    <el-date-picker
+      v-model="timeValue"
+      type="date"
+      placeholder="请选择日期"
+    />
+  </el-config-provider>
 </template>
 
 <script setup lang="ts">
-import {
-  ElIcon,
-  ElButton,
-  ElDropdown,
-  ElDropdownMenu,
-  ElDropdownItem,
-  ElConfigProvider,
-  ElDatePicker,
-  ElMessage,
-} from "element-plus";
 import zhCn from "element-plus/es/locale/lang/zh-cn";
-import { Grape, IceCream, IceDrink, ArrowDown } from "@element-plus/icons-vue";
 
 const timeValue = ref("");
 const hello = () => ElMessage.info("hello world");

components/Logos.vue

@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ElIcon } from 'element-plus'
-import { Plus } from '@element-plus/icons-vue'
 </script>
 
 <template>
@@ -9,7 +7,7 @@ import { Plus } from '@element-plus/icons-vue'
       class="logo"
       src="https://element-plus.org/images/element-plus-logo.svg"
     />
-    <el-icon><Plus /></el-icon>
+    <el-icon><ElIconPlus /></el-icon>
     <NuxtLogo class="logo" />
   </div>
   <h2>

nuxt.config.ts

@@ -1,5 +1,3 @@
-import ElementPlus from 'unplugin-element-plus/vite'
-
 // https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
 export default defineNuxtConfig({
   app: {
@@ -21,25 +19,18 @@ export default defineNuxtConfig({
   // css
   css: ['~/assets/scss/index.scss'],
 
-  // build
-  build: {
-    transpile: ['element-plus/es'],
-  },
-
   typescript: {
     strict: true,
     shim: false,
   },
 
-  vite: {
-    plugins: [ElementPlus()],
-  },
-
   // build modules
-  modules: ['@vueuse/nuxt', '@unocss/nuxt', '@pinia/nuxt'],
-
-  // auto import components
-  components: true,
+  modules: [
+    '@vueuse/nuxt',
+    '@unocss/nuxt',
+    '@pinia/nuxt',
+    '@element-plus/nuxt',
+  ],
 
   // vueuse
   vueuse: {
@@ -53,4 +44,8 @@ export default defineNuxtConfig({
       scale: 1.2,
     },
   },
+
+  elementPlus: {
+    icon: 'ElIcon',
+  },
 })

package.json

@@ -19,21 +19,22 @@
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.0.10",
+    "@element-plus/nuxt": "^1.0.2",
     "@pinia/nuxt": "^0.4.6",
     "@unocss/nuxt": "^0.48.0",
     "@vueuse/nuxt": "^9.9.0",
     "element-plus": "^2.2.27",
     "nuxt": "^3.0.0",
     "sass": "^1.57.1",
     "typescript": "^4.9.4",
-    "unplugin-element-plus": "^0.4.1",
     "vue-router": "^4.1.6"
   },
   "pnpm": {
     "peerDependencyRules": {
       "ignoreMissing": [
         "webpack",
-        "vite"
+        "vite",
+        "vue"
       ]
     }
   }