0

I am using buefy autocomplete component with nuxt.js. I have imported the CSS file. and the CSS working properly on the localhost but on the live server is not working. I thought the problem may be with buefy but the same problem I am facing with vue-select autocomplete.

Everything is perfect on the local server but when I move my files to live server and do num run build noting works from buefy and vue-select.

Note: the rest of all CSS working just fine

Localhost

enter image description here

Production

enter image description here

And it's not only autocomplete component, none of the buefy components are working, Radio Buttons, Calender etc.

A little guidance will be appreciated. Thanks

Amir Ur Rehman
  • 649
  • 1
  • 9
  • 28
  • Works fine for me. How did you setup buefy? Did you have an existing nuxt project when you were adding it ? – htmn Jan 20 '20 at 13:23
  • Can you please check this -> https://codeshare.io/2KMrN8 This is how i setup the buefy – Amir Ur Rehman Jan 20 '20 at 13:51
  • Try setting up buefy as I mentioned in the answer, see if it works and let me know if you are still having problems also with vue-select. – htmn Jan 20 '20 at 14:19

1 Answers1

0

As of today, Buefy has an official support for Nuxt. Instead of importing buefy's css inside nuxt.config.js and creating a new plugin, you can use a nuxt module.

If you create a new Nuxt project using create-nuxt-app, you can choose to add Buefy as your UI framework.

If you have an existing nuxt project, you can simply install the nuxt-buefy module manually: 

npm i nuxt-buefy

nuxt.config.js

...,
modules: [
  'nuxt-buefy',
],
...
htmn
  • 1,505
  • 2
  • 15
  • 26
  • Hey, @htmn thanks for the answer but still the same. I did exactly but the CSS is not working – Amir Ur Rehman Jan 21 '20 at 06:36
  • Did you also try running the preconfigured server `npm run build` and then `npm run start` ? – htmn Jan 21 '20 at 08:10
  • Yes I did. Actually I have managed it with vue-select CDN css for now. but I know its not a solution. – Amir Ur Rehman Jan 21 '20 at 08:20
  • That is strange, what version of nuxt are you using ? I can see that inside your `nuxt.config.js` you are still using `ssr: false`, which is [deprecated](https://nuxtjs.org/guide/plugins/#client-side-only) and it is now adapted to `mode: 'client'` option. I'm just shooting into dark here, is it a private project, do you have a repo available to share ? Also if it's not a large project I would consider starting fresh and just use `npx create-nuxt-app`, because buefy is working fine for me after I selected it as my UI framework and ran `npm run start`. – htmn Jan 21 '20 at 08:40
  • I have exactly the same issue @htmn, did you find a solution at the end ? – Uelb Apr 17 '20 at 12:10