Closed mekedron closed 1 year ago
I have the same issue as above
Same issue, any fix?
Adding this made it work:
build: {
transpile: [
// https://github.com/element-plus/element-plus-nuxt-starter/blob/44644788ee0d2a2580769769f9885b5cd9f7c0ab/nuxt.config.ts#L27
...(lifecycle === 'build' || lifecycle === 'generate'
? ['element-plus']
: []),
// For importing 'element-plus/es/components/xxx/style/css' to work
'element-plus/es',
],
},
See: https://github.com/daotl/nuxt-starter/blob/master/nuxt.config.ts
Or alternatively, you can set ssr: true
for ElementPlusResolver
ElementPlusResolver({ ssr: true })
See: https://github.com/antfu/vite-ssg/issues/171#issuecomment-1151963829
nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import IconsResolver from "unplugin-icons/resolver"
const lifecycle = process.env.npm_lifecycle_event
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
meta: {
title: 'Element Plus + Nuxt 3',
meta: [
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{
hid: 'description',
name: 'description',
content: 'ElementPlus + Nuxt3',
},
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
},
build: {
transpile: [
lifecycle === 'build' || lifecycle === 'generate' ? 'element-plus' : '',
'element-plus/es'
],
postcss: {
postcssOptions: {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
},
},
},
vite: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
dts: true,
resolvers: [ElementPlusResolver({ ssr: true }), IconsResolver({})],
}),
],
},
modules: [
'@nuxt/content', '@vueuse/nuxt',
],
nitro: {
plugins: [
// "~/database/index.ts",
]
},
css: [
'~/styles/index.scss'
]
})
Got error:
ElementPlusError: [IdInjection] Looks like you are using server rendering, you must provide a id provider to ensure the hydration process to be succeed
usage: app.provide(ID_INJECTION_KEY, {
prefix: number,
current: number,
})
at Object.debugWarn
...
It's impossible to configure auto import using
unplugin-auto-import
andunplugin-vue-components
for vite bundler.When I add these lines to
nuxt.config.ts
:When I'm trying to load the index page I get the following output in a server console: