Cannot import bootstrap in nuxt vue component [duplicate]

问题

This question already has answers here:

“Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6 (12 answers)

Closed 10 months ago.

I can't import bootstrap in any vue component (using latest nuxtjs). I get :

My (simple) component is :

<template>
  <h1>Empty index page</h1>
</template>

<script>
import Modal from 'bootstrap/js/src/modal'

export default {}
</script>

<style></style>

I am really stuck. Do you have any idea or suggestion ?

回答1:

You should use bootstrap-vue, they fix a lot of issues and their tree-shacking works amazing.

your code will be

<template>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button> 
  <b-modal id="modal-1" title="BootstrapVue" >
    <h1>Empty index page</h1>
  </b-modal>
</template>

<script>
  import { BModal, BButton } from 'bootstrap-vue'

  export default {
    name: "Modal Component",
    components: {
      'b-modal': BModal,
      'b-button': BButton
    }
  }
</script>

<style></style>

more info in the bootstrap-vue guide

来源：https://stackoverflow.com/questions/60960904/cannot-import-bootstrap-in-nuxt-vue-component