How do I only import Navbar, Dropdown and Modal from buefy in Nuxt?

Question

• I am trying to import only the Navbar, Modal and Dropdown from Buefy and running into errors trying to do the same
• I also want only the relevant scss files
• I have tried multiple methods so far and nothing works

Method 1

• npx create-nuxt-app custombuefy
• Do not select any frontend framework here

Step 1 Install Bulma

• npm i node-sass sass-loader -D
• npm i bulma
• Create app.scss inside styles folder inside assets directory
• @import "~bulma" inside app.scss
• Include '~/assets/styles/app,scss' inside css section of nuxt.config.js
• npm run build && npm run start, Check if page with Bulma runs on localhost:3000
• Runs successfully at this stage

Step 2 Install Normal Buefy without nuxt-buefy

• npm i buefy
• Create buefy.js file inside plugins directory
• Add '~/plugins/buefy.js' to plugins section of nuxt.config.js
• Add the following code to import BDropdown, BModal, BNavbar from buefy

Included the CSS directly here initially

import Vue from 'vue'
import { BDropdown, BDropdownItem, BModal, BNavbar } from 'buefy'
import 'buefy/dist/buefy.min.css'

Vue.use(BDropdownItem)
Vue.use(BDropdown)
Vue.use(BModal)
Vue.use(BNavbar)

• Add the dropdown to the code in index.

pages/index.vue file

<template>
  <div class="container">
    <div>
      <logo />
      <b-dropdown aria-role="list">
        <button
          slot="trigger"
          slot-scope="{ active }"
          class="button is-primary"
        >
          <span>Click me!</span>
          <b-icon :icon="active ? 'menu-up' : 'menu-down'"></b-icon>
        </button>

        <b-dropdown-item aria-role="listitem">Action</b-dropdown-item>
        <b-dropdown-item aria-role="listitem">Another action</b-dropdown-item>
        <b-dropdown-item aria-role="listitem">Something else</b-dropdown-item>
      </b-dropdown>
    </div>
  </div>
</template>

<script>
import Logo from '~/components/Logo.vue'

export default {
  components: {
    Logo,
  },
}
</script>

<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.title {
  font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}

.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}

.links {
  padding-top: 15px;
}
</style>

nuxt.config.js

module.exports = {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: process.env.npm_package_description || '',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  /*
   ** Customize the progress-bar color
   */
  loading: { color: '#fff' },
  /*
   ** Global CSS
   */
  css: ['~/assets/styles/app.scss'],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: ['~/plugins/buefy'],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module',
    // Doc: https://github.com/nuxt-community/stylelint-module
    '@nuxtjs/stylelint-module',
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    // Doc: https://github.com/nuxt-community/dotenv-module
    '@nuxtjs/dotenv',
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {},
  },
}

Result

 ERROR  Cannot read property 'install' of undefined                                                                                                                                                                                                                                                        16:19:41

  at Function.t.use (node_modules/vue/dist/vue.runtime.common.prod.js:6:36869)
  at Module.<anonymous> (server.js:1:559776)
  at r (server.js:1:194)
  at Object.<anonymous> (server.js:1:5233)
  at r (server.js:1:194)
  at server.js:1:1259
  at Object.<anonymous> (server.js:1:1269)
  at o (node_modules/vue-server-renderer/build.prod.js:1:77607)
  at node_modules/vue-server-renderer/build.prod.js:1:78200
  at new Promise (<anonymous>)

Method 2

Lets modify the plugins/buefy.js file to instead use dist/esm modules

import Vue from 'vue'
import { BDropdown, BDropdownItem } from 'buefy/dist/esm/dropdown'
import 'buefy/dist/buefy.min.css'

Vue.use(BDropdownItem)
Vue.use(BDropdown)

Result

 ERROR  Cannot use import statement outside a module                                                                                                                                                                                                                                                       16:23:03

  (function (exports, require, module, __filename, __dirname) { import './chunk-6ea13200.js';
  ^^^^^^

  SyntaxError: Cannot use import statement outside a module
  at new Script (vm.js:88:7)
  at createScript (vm.js:263:10)
  at Object.runInThisContext (vm.js:311:10)
  at wrapSafe (internal/modules/cjs/loader.js:1059:15)
  at Module._compile (internal/modules/cjs/loader.js:1122:27)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1178:10)
  at Module.load (internal/modules/cjs/loader.js:1002:32)
  at Function.Module._load (internal/modules/cjs/loader.js:901:14)
  at Module.require (internal/modules/cjs/loader.js:1044:19)
  at require (internal/modules/cjs/helpers.js:77:18)

Method 3

Lets use the components from the components directory instead. We again modify plugins/buefy.js file as follows

import Vue from 'vue'
import { BDropdown, BDropdownItem } from 'buefy/dist/components/dropdown'
import 'buefy/dist/buefy.min.css'

Vue.use(BDropdownItem)
Vue.use(BDropdown)

Result

Now I get a new error saying Unknown custom element in Browser console and the dropdown appears completely broken

In case this is a dependency issue, here is my package.json file

{
  "name": "custombuefy",
  "version": "1.0.0",
  "description": "My marvelous Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "test": "jest"
  },
  "lint-staged": {
    "*.{js,vue}": "npm run lint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.9.7",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "buefy": "^0.8.15",
    "bulma": "^0.8.2",
    "cross-env": "^7.0.2",
    "express": "^4.17.1",
    "nuxt": "^2.12.2"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^2.0.2",
    "@nuxtjs/eslint-module": "^1.1.0",
    "@nuxtjs/stylelint-module": "^3.2.2",
    "@vue/test-utils": "^1.0.0-beta.33",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^25.3.0",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-plugin-nuxt": ">=0.5.2",
    "eslint-plugin-prettier": "^3.1.3",
    "husky": "^4.2.5",
    "jest": "^25.3.0",
    "lint-staged": "^10.1.5",
    "node-sass": "^4.13.1",
    "nodemon": "^2.0.3",
    "prettier": "^2.0.4",
    "sass-loader": "^8.0.2",
    "stylelint": "^13.3.2",
    "vue-jest": "^4.0.0-0"
  }
}

Can someone please tell me how I can import only the Dropdown, Navbar and Modal from Buefy without running into all these errors?

Answer 1

import Vue from 'vue'
import { Dropdown, Icon } from 'buefy'

Vue.use(Dropdown)
Vue.use(Icon)

Fixed the issue but component wise scss is still not working

With app.scss as

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

Buefy styles are not getting applied to the dropdown

UPDATE Even SCSS can be imported partially

@import "~buefy/src/scss/utils/_all";
@import "~buefy/src/scss/components/_autocomplete";
@import "~buefy/src/scss/components/_dropdown";
@import "~buefy/src/scss/components/_notices";