Correct way to install client-side UI Frameworks

[Hugo01]

Hello, first of all thank you for your dedication to making all of this work
Right now I'm having a struggle to understand how you would install things like frameworks to the client
Let's take ElementPLus for instance, documentation says :

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

What is the equivalent of this? I've tried this on _default.page.client.js

import { getPage } from 'vite-plugin-ssr/client'
import { createApp } from './app'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

hydrate()
async function hydrate() {
 const pageContext = await getPage()
 const app = createApp(pageContext)
 app.use(ElementPlus)
 app.mount('#app')
}

But all i've got is [Vue warn]: Failed to resolve component: el-button
I'm pretty sure i'm just making a simple mistake here but I just can't figure out what is it
Any help would be appreciated, thanks

Also using quasar framework would be possible ?

[brillout]

Do you know what el-button is?

You can try with an SPA (see https://github.com/brillout/vite-plugin-ssr#spa-vs-ssr-vs-html) and see if it works (it should since you then follow exactly the official ElementPlus docs), that is return some static HTML instead of doing SSR. Make sure to replace createSSRApp with createApp in app.js. Also use Vue 2 instead of Vue 3 if ElementPlus doesn't support Vue 3.

You can then progressively move back towards the original setup and see where the problem lies.

[Hugo01]

<el-button> supposed to be a tag for the button on ElementPlus
I've already used ElementPlus with Vue 3.0 and it works

I tried importing on the app.js inside the default folder instead and it worked!
I guess that was the issue.
Thanks for you help, I see your dedication answering every single issue here

For anyone reading this and wonder about quasar I couldn't make it work, it looks like quasar still does not support Vitte

[brillout]

Note that

Vite.js support is officially scheduled. https://roadmap.quasar.dev

quasarframework/quasar#7815