title: How do I only import Navbar, Dropdown and Modal from buefy in Nuxt?
body: <ul>
  <li>I am trying to import only the Navbar, Modal and Dropdown from Buefy and running into errors trying to do the same</li>
  <li>I also want only the relevant scss files</li>
  <li>I have tried multiple methods so far and nothing works</li>
  </ul>
  
  <p><strong>Method 1</strong></p>
  
  <ul>
  <li>npx create-nuxt-app custombuefy</li>
  <li>Do not select any frontend framework here</li>
  </ul>
  
  <p><strong>Step 1 Install Bulma</strong></p>
  
  <ul>
  <li>npm i node-sass sass-loader -D</li>
  <li>npm i bulma</li>
  <li>Create app.scss inside styles folder inside assets directory</li>
  <li>@import "~bulma" inside app.scss</li>
  <li>Include '~/assets/styles/app,scss' inside css section of nuxt.config.js</li>
  <li>npm run build &amp;&amp; npm run start, Check if page with Bulma runs on localhost:3000</li>
  <li>Runs successfully at this stage</li>
  </ul>
  
  <p><strong>Step 2 Install Normal Buefy without nuxt-buefy</strong></p>
  
  <ul>
  <li>npm i buefy</li>
  <li>Create buefy.js file inside plugins directory</li>
  <li>Add '~/plugins/buefy.js' to plugins section of nuxt.config.js</li>
  <li>Add the following code to import BDropdown, BModal, BNavbar from buefy</li>
  </ul>
  
  <p>Included the CSS directly here initially</p>
  
  <pre><code>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)
  </code></pre>
  
  <ul>
  <li>Add the dropdown to the code in index.</li>
  </ul>
  
  <p>pages/index.vue file</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;div&gt;
        &lt;logo /&gt;
        &lt;b-dropdown aria-role="list"&gt;
          &lt;button
            slot="trigger"
            slot-scope="{ active }"
            class="button is-primary"
          &gt;
            &lt;span&gt;Click me!&lt;/span&gt;
            &lt;b-icon :icon="active ? 'menu-up' : 'menu-down'"&gt;&lt;/b-icon&gt;
          &lt;/button&gt;
  
          &lt;b-dropdown-item aria-role="listitem"&gt;Action&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item aria-role="listitem"&gt;Another action&lt;/b-dropdown-item&gt;
          &lt;b-dropdown-item aria-role="listitem"&gt;Something else&lt;/b-dropdown-item&gt;
        &lt;/b-dropdown&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Logo from '~/components/Logo.vue'
  
  export default {
    components: {
      Logo,
    },
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>nuxt.config.js</strong></p>
  
  <pre><code>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) {},
    },
  }
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <pre><code> 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.&lt;anonymous&gt; (server.js:1:559776)
    at r (server.js:1:194)
    at Object.&lt;anonymous&gt; (server.js:1:5233)
    at r (server.js:1:194)
    at server.js:1:1259
    at Object.&lt;anonymous&gt; (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 (&lt;anonymous&gt;)
  </code></pre>
  
  <p><strong>Method 2</strong></p>
  
  <p>Lets modify the plugins/buefy.js file to instead use dist/esm modules</p>
  
  <pre><code>import Vue from 'vue'
  import { BDropdown, BDropdownItem } from 'buefy/dist/esm/dropdown'
  import 'buefy/dist/buefy.min.css'
  
  Vue.use(BDropdownItem)
  Vue.use(BDropdown)
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <pre><code> 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)
  </code></pre>
  
  <p><strong>Method 3</strong></p>
  
  <p>Lets use the components from the components directory instead. We again modify plugins/buefy.js file as follows</p>
  
  <pre><code>import Vue from 'vue'
  import { BDropdown, BDropdownItem } from 'buefy/dist/components/dropdown'
  import 'buefy/dist/buefy.min.css'
  
  Vue.use(BDropdownItem)
  Vue.use(BDropdown)
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p>Now I get a new error saying Unknown custom element in Browser console and the dropdown appears completely broken</p>
  
  <p><a href="https://i.stack.imgur.com/uvUEa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvUEa.png" alt="enter image description here"></a></p>
  
  <p>In case this is a dependency issue, here is my package.json file</p>
  
  <pre><code>{
    "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": "&gt;=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"
    }
  }
  </code></pre>
  
  <p>Can someone please tell me how I can import only the Dropdown, Navbar and Modal from Buefy without running into all these errors?</p>