0

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

enter image description here

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 ?

FabriceD
  • 167
  • 2
  • 7
  • Does this answer your question? ["Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6](https://stackoverflow.com/questions/58211880/uncaught-syntaxerror-cannot-use-import-statement-outside-a-module-when-import) – Joseph Mar 31 '20 at 22:30
  • Use bootstrap-vue, here is the doc: https://bootstrap-vue.js.org/docs/#nuxtjs-module – Syed Apr 01 '20 at 02:04

1 Answers1

0

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

chefjuanpi
  • 1,570
  • 15
  • 27