Customizing Beufy / Bulma in Nuxt

solution

create global styles in ~/css/main.scss and modify variables before importing Bulma files. Than add it in nuxt.config.js

@import '~bulma/sass/utilities/_all';
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your colors
$primary: #8c67ef;
$primary-invert: findColorInvert($primary);
$twitter: #4099ff;
$twitter-invert: findColorInvert($twitter);

// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
  'white': (
    $white,
    $black
  ),
  'black': (
    $black,
    $white
  ),
  'light': (
    $light,
    $light-invert
  ),
  'dark': (
    $dark,
    $dark-invert
  ),
  'primary': (
    $primary,
    $primary-invert
  ),
  'info': (
    $info,
    $info-invert
  ),
  'success': (
    $success,
    $success-invert
  ),
  'warning': (
    $warning,
    $warning-invert
  ),
  'danger': (
    $danger,
    $danger-invert
  ),
  'twitter': (
    $twitter,
    $twitter-invert
  )
);
$gap : 32px;
$body-size :16px;
$body-font-size	:1em;
html,body{
  @media screen and (max-width: 768px)  {
     
    font-size:14px !important;  
  }

}
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;

$family-sans-serif: 'Nunito', sans-serif;
$family-primary: $family-sans-serif;
$family-secondary: $family-sans-serif;



// Import Bulma and Buefy styles
@import '~bulma';
@import '~buefy/src/scss/buefy';
...
  loading: { color: '#ff0000' },
  /*
   ** Global CSS
   */
  css: ['~/css/main.scss'],
  render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      }
    }
  },
...

Nuxt – asyncData with multiple enpoints

problem

using Promise.all to retrieve data from more than one endpoint.
* payoadUrl is for retrieving payload.js if necessary ( from nuxt-payload-extractor module )

solution

  async asyncData({ app, query, error, $axios, $payloadURL, route, params }) {
    // if generated and works as client navigation, fetch previously saved static JSON payload
    if (process.static && process.client)
      // return await $axios.$get($payloadURL(route))
      return $axios.$get($payloadURL(route))

    const [venuesRes, countriesRes, categoriesRes] = await Promise.all([
      app.$axios.$get('http://localhost:8080/api/venues'),
      app.$axios.$get('http://localhost:8080/api/countries'),
      app.$axios.$get('http://localhost:8080/api/categories')
    ])
    return {
      countries: countriesRes.data,
      venues: venuesRes.data,
      categories: categoriesRes.data
    }
  },

Nuxt – Buefy – mobile menu not working

problem

Using beufy and <b-navbar> component. Mobile menu is being closed after clicking on any link inside instead of opening another page. Probably click event is not propagated

solution

Need to set navbar so it does not automatically close on click (close-on-click) and manually close it after menu link is clicked

// .sync modifier enables 2way binding
<b-navbar
    type="is-warning"
    fixed-top
    transparent
    :is-active.sync="mobilemenu"
    :close-on-click="false"
  >

//.native modifier is necessery for nuxt-link, router-link etc 
      <b-navbar-item
        tag="nuxt-link"
        :to="{ path: '/about/' }"
        @click.native="menuClicked()"
      >
        About
      </b-navbar-item>


export default {
  data() {
    return {
      mobilemenu: false
    }
  },

  methods: {
    menuClicked(event) {
      this.mobilemenu = false
    }
  }
}