Unable to include Buefy or Bulma in a Vuejs project

I am working on a Vue.js project and I would like to incorporate the Bulma framework and possibly Buefy as well.

To start, I used the commands npm install bulma and npm install buefy

In the main.js file, my setup looks like this:

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

Additionally, in App.vue, I tried to load Bulma using:

<style lang="css">
@import '../node_modules/bulma/css/bulma.css';

Within the assets/scss folder, I have included the following imports:

@import "~bulma";
@import "~buefy/src/scss/buefy";

Despite restarting the Vue server, I am still unable to see the styling from Bulma or Buefy reflected in my project.

Answer №2

When working with a vue component, it's important to import only the specific style.scss file that you have defined and include any imported bulma styles.

To prevent potential issues, make sure to use <style lang="scss" scoped> when utilizing buefy.

In your bulma configuration file, include the following imports:

// Accessing all of bulma's core styles
@import '~bulma/sass/utilities/_all.sass'
@import '~bulma/bulma';

Remember to install the necessary dependencies for bulma to work properly:

"nuxt-sass-resources-loader" && "node-sass": "^4.11.0"

Note: For additional customization options, refer to the documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When Nuxt is deployed to Netlify, the CSS Opacity is incorrectly compiled at 1% instead of the intended 100%

I've encountered an issue with my Nuxt app when deploying it to Netlify. After running yarn generate automatically, I noticed some strange CSS behavior in production. Specifically, there is a hover effect on a card that seems to be working fine local ...

Utilizing the layout of nuxt-child over the parent's design

I am currently exploring the world of Nested Routes and <nuxt-child> while working with layouts in nuxt.js. The parent component is housing the <nuxt-child>, giving us a view into the subroutes of the parent. My goal is to have Nuxt utilize t ...

updating the v-model in Vue.js datepicker retains the previously set value while setting a new date

When using the template, the endDate updates as expected. However, there seems to be an issue when the filtersChanged method is called with the @selected attribute - the updated value is not the new one but rather the previously set value. <template&g ...

Add axios requests to the axios.all array

Good evening. I am currently trying to insert an array into the axios.all([]) structure! This is the code snippet I am working on: app2.js new Vue({ el: '#central', data: { estilo: 'resize:none;text-align:center;color: ...

What are the steps to host a VueJS 3 application from subdirectories using NGINX?

I am facing a challenge in serving multiple VueJS 3 apps from the same NGINX server but from different subfolders. Despite exploring various resources on stack and the web, I have not been able to make things work seamlessly. In total, I have three apps e ...

Leverage the power of i18n in both vuejs components and blade.php templates

Is it possible to use i18n in both blade.php and Vue.js views? I have set up a json file for i18n as shown below: export default { "en": { "menu": { "home":"Home", "example":"Example" } } } Using this i18 ...

Steps for inserting a new entry at the start of a dictionary

My fetch method retrieves recordings from the database, but I need to prepend a new record to the existing data for frontend purposes. Can someone assist me with this? <script> export default { components: { }, data: function() { ...

Adding HTML elements to a Vue Tooltip

Does anyone know how to implement a tooltip in Vue for a table cell that has more than 22 characters in its content? I was looking into using the v-tooltip library (https://www.npmjs.com/package/v-tooltip) Setting the tooltip's content with a simple ...

Encountering a Laravel error related to "SymfonyComponentHttpKernelExceptionHttpException"

After transferring my Laravel and Vue JS application to our server, I encountered an error that reads: Symfony\Component\HttpKernel\Exception\HttpException A similar issue was reported here, but unfortunately no solution was provid ...

I am having difficulty retrieving information from the Laravel API

I am struggling to retrieve data from my Laravel application and display it in Vue CLI. While I can see the response, I am encountering difficulties when trying to show it in the Vue application. https://i.stack.imgur.com/tCgrd.png Whenever I attempt to f ...

"Troubleshooting: Resolving 404 Errors with JavaScript and CSS Files in a Vue.js and Node.js Application Deploy

I successfully developed a Vue.js + Node.js application on my local server. However, upon deploying it to a live server, I am facing a 404 error for the JavaScript and CSS files. I have double-checked that the files are indeed in the correct directories on ...

Testing-library does not seem to recognize SFC styles

I've been working on implementing unit tests in our Vue codebase, but I'm running into some trouble when it comes to testing the visibility of an element. Even though I render the component as per usual and following the examples provided in the ...

Adjusting the height of a vertical slider in Vuetify2 is not customizable

I've been trying to adjust the height of a vertical slider in vuetify2, but setting it to "800px" or using style="height:800px" doesn't seem to work as intended. Even though the box within my grid expands, the height of the slider remains unchan ...

Retrieve the highlighted portion of a selected option within a Vue select element

Currently, I am attempting to retrieve the selected text (not value) of a select element using Vue: var App = window.App = new Vue({ el: '#app', data: { style: '5' }, computed: { calctitle: function() { return thi ...

Tips for retrieving the state value and using it as a parameter in methods

Is there a way to utilize Vuex state and access it in the methods property of components? I have a state called "currentThreadId" that I would like to use within my methods. The issue I am facing is being able to retrieve the "currentThreadId" from the Vu ...

Setting up a Webpack configuration for packaging a Vue component as an npm module

Below is the primary JavaScript code for my component: import './sass/main.scss' import Vlider from './Vlider.vue' function install(Vue) { if (install.installed) return; install.installed = true; Vue.component('vlider ...

The functionality of Vue Routes is compromised when deployed to a live environment

Hello, I am a newcomer to Vue.js. I am facing an issue with my Vue.js application where I am unable to access the URL '/foo/apple' on the web hosting server after running "npm run build". It keeps showing error 404. I am using HTML5 History Mode ...

Using Vue.js, send information from an Ajax request to a Laravel controller for processing

As someone new to development, I have a little confusion with handling data from a multi-step form in an AJAX request on my controller. While I've been able to successfully collect all form inputs at once, I'm struggling to use the data from $req ...

Managing timeouts and errors in a Spring and Vue login systemIn this system,

I am currently working on developing a back-end using Spring and a front-end with Vue. Both projects are separate but running on the same machine. I have managed to resolve or disable all cors, csrf, and login issues except for one that has left me complet ...

Utilize the fitBounds feature from GoogleMaps in Vuejs for seamless integration

I've been working on getting the map boundaries to work properly, using a method in conjunction with my existing initMap and askGeolocation methods. Despite my best efforts, I can't seem to get the bounds functionality working so that the map zo ...