Error connecting boostrap 4 to vue?

Question

Bootstrap

Created project from template https://github.com/vuejs-templates/webpack
Downloaded bootstrap 4 https://bootstrap-vue.js.org/docs/setup
Want to use Navbar https://bootstrap-vue.js.org/ docs/components/navbar

Component code

<template>
    <b-navbar toggleable type="light" variant="info" toggle-breakpoint="md">

        <b-nav-toggle target="nav_collapse"></b-nav-toggle>

        <b-navbar-brand href="#">NavBar</b-navbar-brand>

        <b-collapse is-nav id="nav_collapse">

            <b-nav is-nav-bar>
                <b-nav-item href="#">Link</b-nav-item>
                <b-nav-item href="#" disabled>Disabled</b-nav-item>
            </b-nav>

            <!-- Right alignd nav items -->
            <b-nav is-nav-bar class="ml-auto">

                <b-nav-form>
                    <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
                    <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
                </b-nav-form>

                <b-nav-item-dropdown text="Lang" right>
                    <b-dropdown-item to="#">EN</b-dropdown-item>
                    <b-dropdown-item to="#">ES</b-dropdown-item>
                    <b-dropdown-item to="#">RU</b-dropdown-item>
                    <b-dropdown-item to="#">FA</b-dropdown-item>
                </b-nav-item-dropdown>

                <b-nav-item-dropdown right>
                    <!-- Using button-content slot -->
                    <template slot="button-content">
                        <em>User</em>
                    </template>
                    <b-dropdown-item to="#">Profile</b-dropdown-item>
                    <b-dropdown-item to="#">Signout</b-dropdown-item>
                </b-nav-item-dropdown>
            </b-nav>

        </b-collapse>
    </b-navbar>
</template>

<script>
  import {
    bNavbar,
    bDropdown,
    bNavItemDropdown,
    bCollapse,
    bDropdownItem,
    bNavToggle,
    bNavbarBrand,
    bNav,
    bNavForm,
    bButton,
    bFormInput,
    bNavItem
  } from 'bootstrap-vue/lib/components'
  import {
    bToggle,
    bModal,
    bScrollspy
  } from 'bootstrap-vue/lib/directives'
  export default {
    data: function () {
      return {
        hello: 123
      }
    },
    components: {
      bNavbar,
      bDropdown,
      bNavItemDropdown,
      bCollapse,
      bDropdownItem,
      bNavToggle,
      bNavbarBrand,
      bNav,
      bNavForm,
      bButton,
      bFormInput,
      bNavItem
    },
    directives: {
      bToggle,
      bModal,
      bScrollspy
    }
  }
</script>

<style>

</style>

Error when building project

Mistake

ERROR Failed to compile with 1 errors 16:07:51
error in ./~/bootstrap-vue/lib/mixins/dropdown.js
Module parse failed: C:\Users\alexey\PhpstormProjects\vue.git\node_modules\bootstrap-vue\lib\mixins\dropdown.js Unexpected token (110:8)
You may need an appropriate loader to handle this file type.
| },
| methods: {
| ...clickOut.methods,
| noop() {
| // Do nothing event handler (used in visible watch)
@ ./~/bootstrap-vue/lib/mixins/index.js 2:0-38
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./~/bootstrap-vue/lib/components/collapse.vue
@ ./~/bootstrap-vue/lib/components/collapse.vue
@ ./~/bootstrap-vue/lib/components/index.js
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/header/ComponentHeaderNavbar.vue
@ ./src/components/header/ComponentHeaderNavbar.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/header/ComponentHeader.vue
@ ./src/components/header/ComponentHeader.vue
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
@ ./src/App.vue
@ ./src/main.js
@ multi ./build/dev-client ./src/main.js
> Listening at localhost:8080

Googling found the answer https://github.com/bootstrap-vue/bootstrap-vue/iss...
Installed https://babeljs.io/docs/plugins/transform-object-r...
but the error remains

.babelrc file

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul","transform-object-rest-spread"]
    }
  }
}

Answer 1

You have the wrong
babelrc

{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }],
    "stage-2"
  ],
  // место для плагина
  "plugins": ["transform-runtime", "transform-object-rest-spread"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul",]
    }
  }
}