How to introduce Element-Plus

[wwys-top]

How to introduce Element-Plus

[yuanbug]

Here is how I use Quasar-next. It should be similar.

clientAppEnhance.ts

import { defineClientAppEnhance } from '@vuepress/client';

// import styles of UI libs
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/line-awesome/line-awesome.css';
import '@quasar/extras/roboto-font/roboto-font.css';
import 'quasar/src/css/index.sass';
import './styles/index.scss';

// app.use(yourUILib) , works well whether __SSR__ or __DEV__
export default defineClientAppEnhance(async (enhance) => {
  import('quasar').then((quasarModule) => {
    enhance.app.use(quasarModule.Quasar);
  });
});

Layout.vue

<template>
  <ClientOnly>
    <!-- use your UI components inner ClientOnly tag -->
  </ClientOnly>
</template>

More information may help you：

• Use Non-SSR-Friendly Features / 使用不支持 SSR 的功能
• Import Element Plus / 引入 Element Plus

[jiazengp]

Fully import

In clientAppEnhance.ts:

import { defineClientAppEnhance } from '@vuepress/client'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css';

export default defineClientAppEnhance(({ app, router, siteData }) => {
  app.use(ElementPlus, { locale })
})

[wl05]

util.js:131 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'proxy') at useGlobalConfig (util.js:131) at setup (index.js:39) at callWithErrorHandling (runtime-core.esm-bundler.js:6666) at setupStatefulComponent (runtime-core.esm-bundler.js:6282) at setupComponent (runtime-core.esm-bundler.js:6238) at mountComponent (runtime-core.esm-bundler.js:4091) at processComponent (runtime-core.esm-bundler.js:4066) at patch (runtime-core.esm-bundler.js:3661) at mountChildren (runtime-core.esm-bundler.js:3857) at processFragment (runtime-core.esm-bundler.js:4025)

any one encounter this？