I want to load by default theme bootstrap for the vueform builder

[ajitkaur8b]

also have followed all the steps in docs but getting errors like this
Uncaught SyntaxError: The requested module 'http://localhost:5174/node_modules/wnumb/wNumb.js?v=5e2edc78' doesn't provide an export named: 'default' when i assigned bootstrap to theme in vue.config.js. Please suggest

[adamberecz]

I double checked and we have an incorrect information here.

You need to import
import bootstrap from '@vueform/vueform/dist/bootstrap'
instead of
import bootstrap from '@vueform/vueform/themes/bootstrap'
in vueform.config.js

I make sure it gets fixed in the docs.

[ajitkaur8b]

Thanks for the reply but after doing that change i am getting this
Uncaught TypeError: config.theme.classes.TextElement is undefined
config index.mjs:16
install index.mjs:14473
install index.mjs:14470
install index.mjs:14465
use runtime-core.esm-bundler.js:3863
main.js:11

Is there anything which i need to update.

[adamberecz]

If you have the builder installed in your project, you must use the tailwind theme, as the builder depends on it.

If you want to include the bootstrap theme you need to set up a different project for rendering forms only.

But, just so you know, the bootstrap theme is just a set of CSS variables configured to Bootstrap's default values. If you keep tailwind in your project and set theme CSS variables at rendering time you will get the same results. If you change the order of themes available to the builder so that Bootstrap becomes the first, you will have that theme loaded by deafult. Here's an example how to do that: https://stackblitz.com/edit/github-amcuqq-fbw967kv?file=builder.config.js