Documentation - Instructions on how to setup balm for Nuxt 3

[TomMiller-mas]

I am new to Nuxt and balm and would appreciate it if someone has already done this, that they put instruction here. I will update them as I follow them with additional detail so they can eventually be used for documentation. Thanks!

[elf-mouse]

Hi @TomMiller-mas ,

Currently nuxt3 is still in beta stage, so no UI integration solution is provided for now, you can refer to nuxt3 with BalmUI example to start your nuxt3 project

[TomMiller-mas]

If you leave this open, I will try to make some notes from a newbie's point of view.

[TomMiller-mas]

How to Install Balm-UI for nuxt.js v3 beta/rc:

Install nuxt v3
npx nuxi init <app name>

Install Balm-UI v10. As of this writing, v10 is still in development. npm i balm-ui@next

WIP

[elf-mouse]

• config nuxt.config.ts

  import { defineNuxtConfig } from 'nuxt3';
  
  export default defineNuxtConfig({
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js',
      'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.esm.js'
    },
    css: ['balm-ui/dist/balm-ui.css'],
    ssr: false // for NOW
  });
  

• add plugins/balm-ui.js

  import { defineNuxtPlugin } from '#app';
  import BalmUI from 'balm-ui';
  import BalmUIPlus from 'balm-ui-plus';
  
  export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(BalmUI);
    nuxtApp.vueApp.use(BalmUIPlus);
  });
  

[tsrift]

With this sugessted configuration of nuxt.config.ts I got error:

Could not load ...\node_modules\vue\dist\vue.esm-bundler.js\server-renderer (imported by node_modules/nuxt/dist/core/runtime/nitro/renderer.mjs): ENOENT: no such file or directory, open '...\node_modules\vue\dist\vue.esm-bundler.js\server-renderer'

[tsrift]

• config nuxt.config.ts

export default defineNuxtConfig({
    alias: {
        vue: 'vue/dist/vue.esm-bundler.js',
        'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.esm.js'
    },
    css: ['balm-ui/dist/balm-ui.css'],
    ssr: false // for NOW
});

Could not load ...\node_modules\vue\dist\vue.esm-bundler.js\server-renderer (imported by node_modules/nuxt/dist/core/runtime/nitro/renderer.mjs): ENOENT: no such file or directory, open '...\node_modules\vue\dist\vue.esm-bundler.js\server-renderer'

[elf-mouse]

Hi @tsrift , please update your nuxt.config.ts:

export default defineNuxtConfig({
  alias: {
    'balm-ui-plus': 'balm-ui/dist/balm-ui-plus.esm.js'
  },
  css: ['balm-ui/dist/balm-ui.css'],
  hooks: {
    'vite:extendConfig': (config, { isClient }) => {
      if (isClient) {
        config.resolve.alias.vue = 'vue/dist/vue.esm-bundler.js';
      }
    }
  },
  ssr: false
});

[jonaskahn]

Hi @elf-mouse . Can we use "ssr: true" for now ?

[elf-mouse]

Hi @therealtuyen , you can try v10.22.0 again