How to use bulma extensions with a nuxt app
3 distinct tools emerged as the community favourited frameworks for developing modern websites and web apps. React.JS, Angular and Vue, these frameworks come with powerful libraries and are often used with styling sets like Bootstrap and bulma.
To ease development and provide extendable boilerplates higher level frameworks like next and nuxt have been developed atop of react and Vue respectively.
At esugo we like to use nuxt for anything from simple static websites to scalable Single Page Apps (SPAs), especially in combination with the bulma style framework for rich UIs.
Today our engineers share how to use some of the bulma extensions in a nuxt app. While bulma itself can be used simply within the nuxt configurations, it's extensions need to be manually added as required.
Bulma extensions provide valuable styles adding more UI elements to the core CSS library like sliders, switches, calendars and many more. To use these in a new or an existing nuxt app the extension needs to be installed and embedded in 3 easy steps.
1. Install the extension package via node JS
To use a bulma extension the code base of it has to be installed in your project via a nodeJS package manager.
To do this simply add the desired style extension to your packages.json in the 'dependencies' list. Then install the package with a node package manager, like so:
2. Load the extension with SCSS
To use the extension in your nuxt pages the code has to be loaded from the node_modules directory with SCSS and SASS. For this simply create an index.scss file in the assets/sass directory of nuxt. Add instructions into that file to load the sass file of Bulma and the desired extension(s) from your local modules directory. The code will look similar to this:
@import './node_modules/bulma/bulma.sass'; @import './node_modules/bulma-switch/src/sass/index.sass';
3. Import the SASS sets into nuxt
The final step is to tell your nuxt app to import the SAAS code from our assets folder. This can be done simply via the nuxt.config.js file by adding your index.scss to the CSS config:
And that is all, nuxt will now load the extension(s) files on top of the local bulma copy and you are able to use all styles from the extension packages in every nuxt page and component.
While adding extensions is slightly more complicated then the simple selection of a CSS library via the nuxt CLI, it is still fairly easy and provides a powerful way to build highly responsive and professional UI in your SPAs or server rendered pages.