Tech

How to use bulma extensions with a nuxt app

Build beautiful UI / UX apps with sleek bulma styles and the nuxt framework for rapid JavaScript development.

Nuxt & bulma extensions

JavaScript is a language with a rich history, that has come a long way. From providing simple interactivity in the early days of the web, to full fledged frameworks that power extensive applications in front- and back-end, today JavaScript is more popular than ever.

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:

npm install

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:

css: ['@/assets/sass/index.scss'],

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.

Nuxt is one of the easiest ways to get started with modern JavaScript frameworks and simplifies VueJS and component based development significantly. If you are interested to know more about productive development with nuxt and VueJS or the Bulma style framework don't hesitate to get in touch with our engineering experts!

nuxt JavaScript bulma
Share this article

Contact us