Open folamy opened 3 years ago
Yes.
You can use Nuxt:
npx create-nuxt-app <my-project>
Choose
BalmUI
And edit nuxt.config.js
:
import { resolve } from "path";
export default {
// ...
alias: {
vue$: resolve(__dirname, './node_modules/vue/dist/vue.esm.js')
}
};
Then, enjoy :)
@elf-mouse Thank you for your response. However, I am using Vitejs with ssr-vue(vue 3 SSR) example here:
[https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue]()
Can you help me with this, please?
@elf-mouse @
I did another test and discovered that trying to import BalmUIPlus from 'balm-ui-plus'
causes this error:
[vite] Error when evaluating SSR module /node_modules/balm-ui/dist/balm-ui-plus.esm.js:
TypeError: Cannot read property 'undefined' of undefined
at new renderSlot (/home/folamy/Desktop/vitessr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:712:21)
at U (/node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:4384)
at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:7516
at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:8699
at instantiateModule (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68197:166)
(node:20329) UnhandledPromiseRejectionWarning: TypeError: Line must be greater than or equal to 1, got -1
at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67083:13)
at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67152:22)
at /home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68098:34
at String.replace (node --trace-warnings ...
to show where the warning was created)
(node:20329) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict
(see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:20329) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
Also, trying to do Individual Usage
import UiButton from 'balm-ui/components/button' and import $alert from 'balm-ui/plugins/alert'
causes this error:
[vite] Error when evaluating SSR module /src/main.js:
TypeError: Cannot read property 'createVNode' of undefined
at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:2993
at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:23038
at Object.
Otherise, doing import BalmUI from 'balm-ui';
works fine, but I need some components and directive/utils from BalmUIPlus tools.
How do I resolve this, please?
Hi @folamy ,
SSR support is still experimental for vite, so I haven't fully verified balm-ui@next
in vue3 ssr.
I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite example can not work correctly @vitejs:
Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
Hi @folamy ,
SSR support is still experimental for vite, so I haven't fully verified
balm-ui@next
in vue3 ssr.I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:
Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
You need to manually install vite.
yarn add vite -D
@elf-mouse Is there any update on this?
Do I have to open another issue for this?
Hi @folamy , SSR support is still experimental for vite, so I haven't fully verified
balm-ui@next
in vue3 ssr. I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
You need to manually install vite.
yarn add vite -D
(node v16.2.0) My steps:
cd /path/to/vite/packages/playground/ssr-vue
yarn add -D vite
& yarn add balm-ui@next
yarn dev
or npm run dev
, it's not work :(Please give me your demo repository, I would to debug or fix it.
Hi @folamy ,
I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.
Thank you so much~
Hi @folamy , SSR support is still experimental for vite, so I haven't fully verified
balm-ui@next
in vue3 ssr. I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
You need to manually install vite.
yarn add vite -D
(node v16.2.0) My steps:
- clone vite repository
cd /path/to/vite/packages/playground/ssr-vue
yarn add -D vite
&yarn add balm-ui@next
yarn dev
ornpm run dev
, it's not work :(Please give me your demo repository, I would to debug or fix it.
@elf-mouse You should be able to work with this repo here:
clone this repository https://github.com/folamy/vitessr
yarn install
yarn dev
Hi @folamy ,
I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.
Thank you so much~
@elf-mouse, as you have requested, I commented with a demo repo above!
Hi @folamy ,
NOW, The balm-ui@9.27.0
already supports SSR :)
Thank you so~ much!!!
Thank you @elf-mouse, I can see the changes already.
Now, how do I change the color theme? Remember, I am not using balm Cli, but vite!
Please see BalmUI theme apis document.
simple example:
<template>
<ui-button @click="$alert('hi')">SayHi</ui-button>
<ui-button @click="onChangeTheme">Change Theme</ui-button>
</template>
export default {
methods: {
onChangeTheme() {
this.$theme.primary = "red";
this.$theme.onPrimary = "white";
}
}
};
Hi @folamy ,
You need update your vite.config.js
:
module.exports = {
// ...
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js",
"balm-ui-plus": "balm-ui/dist/balm-ui-plus.esm.js",
"balm-ui-css": "balm-ui/dist/balm-ui.css"
}
}
};
Please see BalmUI theme APIs document.
simple example:
<template> <ui-button @click="$alert('hi')">SayHi</ui-button> <ui-button @click="onChangeTheme">Change Theme</ui-button> </template>
export default { methods: { onChangeTheme() { this.$theme.primary = "red"; this.$theme.onPrimary = "white"; } } };
@elf-mouse Thank you, I just want to be able to change everything from application entry
`import $theme from '...' app.use($theme, { primary: #da2efc, .....
})`
Can this work?
I'm using Vue compositional API, so I don't have access to this
in my code.
We use dart sass overwrite for defaults.
And I have updated the $theme
init colors. Try to 9.28.0
again.
Hi @elf-mouse.
Unfortunately, I am stil getting error
app.use(BalmUI, { $theme: { primary: '#2e8b57' } })
I am getting these errors:
[Vue warn]: resolveDirective can only be used in render() or setup().
ReferenceError: document is not defined
at n.value (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:583360)
at /home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:581694
at Array.forEach (
Oh! It's a lifecycle bug.
I have fixed this problem in 9.30.1
.
But I still don’t have time to fully test SSR.
@folamy , thanks for your patience!
Hey! @elf-mouse, thanks once again! I am sorry this may be coming late, but there are still some clarification I would like to make.
Hi @folamy ,
You need to install sass
first: yarn add -D sass
<style lang="scss">
@use '@material/theme/variables' as theme-variables with (
$primary: #f00
);
@use 'balm-ui/components/icon' with (
$font-path: 'balm-ui/fonts'
);
@use 'balm-ui/dist/balm-ui';
// your code
</style>
Can I use balm-ui in vue ssr?