buefy / nuxt-buefy Goto Github PK

Currently hardcoded:

https://github.com/buefy/nuxt-buefy/blob/master/lib/module.js#L16

Would be great to be able to pass it in as an option.

Hi there, for some reason, vertical steps aren't working, was wondering if anyone else has faced this issue....

I finally got the customization with sass variables to work. But I'm not sure if it was the right way to do.

First I had to disable to load the bulma css in the nuxt.config.js

  modules: [,
    ['nuxt-buefy', { 
      css: false
     }]
  ],

then I added my own modification file and added it also to the config

  css: [
    'assets/bulma-modifications.scss'
  ],

In this file I added

@import "~bulma/sass/utilities/_all";

$menu-item-hover-background-color: #3BB9C6;
$menu-item-active-background-color: #0067B1;

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

As I said, now it works. But I'm completely not sure if one should do it this way.

Hi,

I tried a fresh install using create-nuxt-app npx create-nuxt-app . with buefy.

It works well in the front UI, i got my component.
But when i wants to test it with Jest, i have this warn, while the test pass :

console.error node_modules/vue/dist/vue.common.dev.js:630
    [Vue warn]: Unknown custom element: <b-field> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
    found in
    ---> <Anonymous>
           <Root>

my small component :

<template>
  <b-field>
    <b-input type="text" />
  </b-field>
</template>

and my small test :

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Card from '@/components/Card.vue'
import NuxtBuefy from 'nuxt-buefy'

describe('Card', () => {
  test('is a Vue instance', () => {
    const localVue = createLocalVue()
    localVue.use(NuxtBuefy)

    const wrapper = shallowMount(Card, { localVue })
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

Thanks.

I am creating a statically generated website with nuxt.

After updating nuxt-buefy to 0.3.12, a production build of my app results with broken CSS.

Once I reverted back to 0.3.10, the CSS is restored.

Hi, been using this package for a year now but I wonder why toasts are not working anymore. Already did upgraded to v0.3.30 but still no luck.

package.json
"nuxt-buefy": "^0.3.30",

nuxt.config.js

...
modules: [
    ...
    'nuxt-material-design-icons',
    ['nuxt-buefy', { css: false, materialDesignIcons: true }]
    ...
  ],
...

component

mounted() {
    this.$buefy.toast.open('Something happened')
},

Versions

Nuxt.js @ v2.14.5
Node: v12.18.4

Reproduction

Buefy "loader" is not showing.

When I create a brand new project like this: yarn create nuxt-app testapp
I choose "Buefy", "Typescript", "Static site"

Then I try to use the Buefy example code for "loader": https://buefy.org/documentation/loading

<template>
  <section>
    <b-field>
      <button class="button is-primary is-medium" @click="openLoading">
        Launch loading
      </button>
    </b-field>
    <b-field>
      <b-switch v-model="isFullPage">
        Display loader over full page
      </b-switch>
    </b-field>
    <b-notification :closable="false">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis, nibh id hendrerit imperdiet, elit sapien laoreet elit
      <b-loading v-model="isLoading" :is-full-page="isFullPage" :can-cancel="true" />
    </b-notification>
  </section>
</template>

<script>
export default {
  name: 'Loader',
  components: {
  //  Loading
  },
  data () {
    return {
      isLoading: false,
      isFullPage: true
    }
  },
  methods: {
    openLoading () {
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 10 * 1000)
    }
  }
}
</script>

... and it does not work. No error messages or warnings. The "loader" animation is just not showing when I click the button. I have tried a lot of fiddling with the parameters, yet I cant get the loader-animation to show. Otherwise, Buefy seems to be working. So what is happening here? Is there some NuxtJS override that conflicts with this loader in some sense?

I use modal image dialog like in docs:
https://codepen.io/cooloneofficial/live/xxbZyam
But the opening and closing animation does not work..

Does this support font-awesome icons?

What I did

• npm i nuxt-buefy
• Add module to nuxt.config.js

module.exports = {
  // ...
  modules: [
    'nuxt-buefy'
  ]
  // ...
}

• Copied code from official Buefy Tabs example

<b-tabs>
  <b-tab-item label="Pictures" icon="google-photos"></b-tab-item>
  <b-tab-item label="Music" icon="library-music"></b-tab-item>
  <b-tab-item label="Videos" icon="video"></b-tab-item>
</b-tabs>

What I expected

• Everything I need is rendered on the server side

What I got

• Tabs are not rendered on the server side

I'd like to use the Carousel component.

Hello,

nuxt: 2.6.3
nuxt-buefy: 0.3.13

Is there an option to remove the CDN for material design icons and use a package instead? Similar to this buefy/buefy#1500

A workaround would would be:
having everything from https://github.com/Templarian/MaterialDesign-Webfont in the assets. Include the mdi css in the global css options and remove the link to the CDN

css: [
	'@/assets/mdi/css/materialdesignicons.min.css'
],
buefy: {
	materialDesignIcons: true,
	materialDesignIconsHRef: '/'
},

I have it like this right now. But this is more like a hack then a proper method to keep my projects free from third party cdn's.

Thank you!

If using buefy as peer dependecies, people can control their own buefy version, they don't this to wait for nuxt-buefy to update buefy version. What do you think?

Hi,

Where and how do I customize the scss? I want to change the colors of primary etc., but also want to be able to change anything and everything. :-)

I know about:
@import "~bulma/sass/utilities/_all";
But I don't know where to put it.
:-(

Can you update your package? Buefy is out of date? I see that you update buefy, so please update this package as well.

Hello,

I am using Nuxt-Buefy (latest version) with the latest version of Nuxt (2.4.5). When I use the datepicker component and put a v-model, min-date or max-date, I have a persistent warning when the page is loaded server-side:

[Vue warn]: Invalid prop: type check failed for prop "maxDate". Expected Date, got Date 

Reproducer

yarn create nuxt-app testnuxt (choose Universal)
yarn add nuxt-buefy
Add 'nuxt-buefy' module in the nuxt.config.js 
Add <b-datepicker :max-date="new Date()" /> in the index.vue 

When the page is loaded server-side, these warnings appear in the server console: "[Vue warn]: Invalid prop: type check failed for prop "maxDate". Expected Date, got Date "
When the page is loaded client-side, there is no problem.

Nuxt version

I tested it with Nuxt 2.3.4, I had no warning and no issue. The problem exists since Nuxt version 2.4.

When I switched to version 2.4, I also had this issue which I think is the same: davestewart/vuex-pathify#46 (in both cases it's the "instanceof" method that isn't working anymore since Nuxt 2.4)

I cannot for the life of me get font-awesome 5 icons to work for me. I am a bit of noob when it comes to Vue and Nuxt and Bulma, but I have had no problems with pretty much anything else.

I have tried adding the CDN in the nuxt.config, but no luck!

Any help is appreciated!

This is my buefy.js file:

import Buefy from 'buefy'

Vue.use(Buefy, {
  "css": true,
  "defaultIconPack": 'fas'
})```

Is there a preferred way to control responsive breakpoints?

This is not a bug. It is a request to improve the documentation.
I found a way to make font-awesome work in nuxt.
The packages I have installed are:

"@fortawesome/fontawesome-free": "^5.13.0",
"nuxt-buefy": "^0.3.26"

All my buefy configs resides at the nuxt.config.js file. The options that matters to us are:

defaultIconPack: 'fas'
materialDesignIcons: false,

The aditional option that must be set (not a buefy option) is the css for the font-awesome. In the nuxt config file you will find a css option.
There you will add the entry:

@fortawesome/fontawesome-free/css/all.css

if you want to use the CSS already processed, or:

'@fortawesome/fontawesome-free/scss/fontawesome.scss',
'@fortawesome/fontawesome-free/scss/solid.scss'

if you want to use the SASS pre-processor
There is an option if you want to use less, just check the files at the dependency.

With those settings, I'm able to, for example, use the tag

<b-icon icon="user" />

Is it coming time to push the latest to NPM? This bug is causing issues, and it has already been fixed in the latest version, which nuxt-buefy has already pinned to.

buefy/buefy#814

Hi,

I am using this library in a freshly created nuxt 2 project, and I can see buefy.js takes a large portion of the bundle size, is that intentional ?

customizing bulma with my own scss files nuxt breaks.

I tried creating a new project with @Vui/CLI with Buefy and my setup works.

I have also tried installing the buefy-helper-json package. How can this be fixed?

Version: 0.4.3

I changed from Version "nuxt-buefy": "^0.3.31", to 0.4.3 and now the props is empty and i get the error: "Cannot read property 'id' of undefined"

Hi,

I'm trying to customize typography helpers for my project. E.g classes like is-size-1 and is-size-1-mobile.

I have managed to make other customizations, like primary colors and such. But I just cant customize the sizes-variables. Is this possible?

Thanks!

can we use the buefy methods from the context or context.app (https://nuxtjs.org/api/context) because thats something that looks like what the module is used for

Buefy 0.7.0 introduced a breaking error for SSR in Upload component (buefy/buefy#1024). Therefore, all newly created projects will fail in building (see CI logs).

Please take down the latest version until they release the fix.

Usage
{
modules: [
// Simple usage
'nuxt-buefy',

['nuxt-buefy', { /* buefy options */ }]

]
}

It isn't that simple, and this repo is the proof.

Description

There is a version mismatch between buefy in package.json and package-lock.json/yarn.lock. This prevents the nuxt-buefy package from allowing users to utilize the most recent Bulma additions in versions ^0.9.x. (Especially that sweet new b-image component)

If you could run an npm update buefy to match your package.json and the lock files, this issue should be fixed no problem. Happy to open a PR for this if you'd like. Thanks! 😄

Lines in package-lock.json

Lines in yarn.lock

Lines in package.json

yarn.lock

buefy@^0.7.8:
  version "0.7.8"
  resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.7.8.tgz#9f7c73482c248fb9239540d0d415b093c52ffa95"
  dependencies:
    bulma "0.7.5"

package.json

  "dependencies": {
    "buefy": "^0.9.2"
  },

I have the following versions:

"vue": "^2.5.17"
"nuxt": "^2.8.0"
"nuxt-buefy": "^0.3.15"

When I do the following in nuxt.config.js in modules

[...],
[
    "nuxt-buefy",
    {
        css: false
    },
],

for some reason, I can no longer trigger toast, snackbar nor dialogues.

this is just something I came across and I am unsure if this is a bug or intentional.

I try to create a new NuxtJS app using nuxt-create-app but add nuxt-buefy module bug breaks in console.

I believe that the problem is because the path buefy/lib/buefy.css does not exist
the correct one would be buefy/dist/buefy.css

Apologies if this seems like a silly question

• I only want the Navbar and dropdown from Buefy
• I could not find it in #43 #17 and #28
• The customization documentation HERE is modifying Bulma variables, it imports the entire Buefy SCSS file, how do i get only the navbar and dropdown from this
• Could you kindly update README.md to cover such scenarios?

Hi, I'm using nuxt-buefy in my nuxt application(crated with create-nuxt-app), In a page, I'm going to use Buffy tables, But there is an error!
My Error is: TypeError: Cannot read property '_id' of undefined

<template>
  <section class="container">
    <b-table :data="posts" striped hoverable bordered paginated per-page="2" mobile-cards>
      <b-table-column
        field="_id"
        label="آیدی"
        :width="100 / posts.length + '%'"
        numeric
        v-slot="props"
      >{{ props.row._id }}</b-table-column>

      <b-table-column
        field="title"
        label="عنوان"
        :width="100 / posts.length + '%'"
        numeric
        v-slot="props"
      >{{ props.row.title }}</b-table-column>

      <b-table-column
        field="date"
        label="تاریخ پست"
        :width="100 / posts.length + '%'"
        numeric
        v-slot="props"
      >{{ props.row.date }}</b-table-column>
    </b-table>
  </section>
</template>

<script>
import PostsService from '~/services/PostsService';

export default {
  name: 'posts',
  layout: 'admin',
  data() {
    return {
      posts: [],
    };
  },
  methods: {
    async getAllPosts() {
      await PostsService.getPosts()
        .then((response) => {
          this.posts = response.data.posts;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getAllPosts();
  },
};
</script>

I received data with axios from the API, And successfully saved in posts variable, But in the table, props.row._id gives undefined!
NOTE: A receives error in all the columns! Undefined _id, Undefined title and so on...
How can I access to my data in table with props(v-slot="props")?

The UI of the navbar appears to accept the click - but does not activate the contained nuxt-link.

From create-nuxt-app with buefy option - it generates the following inside layouts/default.vue:

          <nuxt-link
            :to="item.to"
            exact-active-class="is-active"
          >
            <b-icon :icon="item.icon" />
            {{ item.title }}
          </nuxt-link>
        </b-navbar-item>

This doesn't work unless we put on this:

.navbar-item > a:only-child {
  display: block;
  width: 100%;
}

Please update to the latest version on Buefy

I've been using this library for a while and one thing that has been annoying me for a while is that datepickers don't seem to get properly localized.

According to buefy documentation, datepickers should use the browser locale automatically if you don't specify it.
It doesn't.
Event if I specify the locale explicitly in the datepicker component, dates are not being applied in the correct locale.

I started checking versions and I realized that nuxt-buefy is requiring buefy 0.8.20 in the package-lock.json file, not the current version which is: 0.9.2.

// Extracted from package-lock.json 
"nuxt-buefy": {
  "version": "0.3.31",
  "resolved": "https://registry.npmjs.org/nuxt-buefy/-/nuxt-buefy-0.3.31.tgz",
  "integrity": "sha512-nO2xd56fizUlNK86D9VRB9DdGq2ekYqDEhBACaQ9XwE16JwCPnV+nLObI/+RkiQNAQM4P12dIqAtbHHgfT6dVw==",
  "requires": {
    "buefy": "^0.8.20"
  }
}

I solved this by installing buefy manually. But I think the buefy require from this library should be able to point to the latest version by default.

I verified this problem with a new project:

npx create-nuxt-app testing
cd testing
npm install nuxt-buefy --save

And then added a datepicker widget to the default page and it was in English, not in Spanish which is my default locale.

Then I ran:

npm install --save buefy

And buefy 0.9.2 was used instead of version 0.8.20 which made the datepicker appear in Spanish by default.

Hi there, is there an easy way to get the latest Buefy without doing a PR to to this repo?
Currently Buefy is at 0.9.1 I believe.

Cheers!

Tested on:

• create-nuxt-app
• nuxt v1.0 & v1.4
• nuxt-buefy v0.0.4

Error Shows HTMLElement is not defined

It could be a problem with buefy, 0.6.4 seems not to like playing with nuxt at all.

is it related to this?

buefy/buefy@0b6f62a

type is being used for classes.

This...

<b-button type="is-primary">Button</b-button>

...becomes:

<button type="button" class="button is-primary">Button</button>

So how can I set a button to type="submit"?

When using this.$toast.open in Nuxt's project, there is no document on the server, so an error is generated.

how to i add this

https://buefy.github.io/#/documentation/constructor-options

do i need to create a plugin ?

thank you

Hi!

nuxt-buefy version: 0.3.7
nuxt version: 2.6.3
OS/Browser: Windows
Description

As described here:
buefy/buefy#701
type where added on buefy v0.6.4 but not yet in nuxt-buefy

Wich mean that I cannot do my tsc without a dirty workaround and that I don't I have the auto-completion wich exist since it has been added on 0.6.4

It would be nice to have them ;) Thanks!

The following screenshots are from a new app from the yarn create nuxt-app hello-world command with buefy selected as the framework of choice.

Looks fine on desktop

Problem with body width and card overflow on mobile. Maybe incorrect responsive breakpoints?

how to import only component need ?
i am only using 3 component of bulma show to import only that 3 component like b-input to minimize my vendor ..
thank you

When buefy (or bulma) get's updated this might break some things when running npm install the next time. Wouldn't it be better and safer to manually bump the buefy version for each release?

When the component rendered then set the value.

Example:

mounted () {
    const self = this
    setTimeout(() => {
      self.myDate = new Date()
    }, 250)
}

Using the new <b-image> component throws an error: https://buefy.org/documentation/image

What did I do?

use this.$dialog.open("some message") and import Dialog and use same method

What happened?

Error said "_vm.alert is not a function"

What do I expect to happen?

A normal dialog appear.

Can you provide system details?

OS: Windows 10
Nuxt-buefy: 0.3.2

Here are the official Buefy docs on customization: https://buefy.org/documentation/customization

But I haven't been able to figure out how to get it working when using the nuxt-buefy module.

Hello,

I'm trying to open a Toast and I get the error 'Uncaught TypeError: Cannot read property 'open' of undefined'.

Is it a known issue or do I have to create a plugin to add the Buefy component to Vue ?

Thanks in advance