title: Integrating bootsrap 5 in Nuxt 3 and Vite
body: <p>I'm trying to integrate Bootstrap 5 in a new Nuxt 3 project but I'm facing a problem that I cannot solve : I want to optimise it by importing only the necessary modules (both scss and javascript) as explained here : <a href="https://getbootstrap.com/docs/5.0/customize/optimize/" rel="noreferrer">https://getbootstrap.com/docs/5.0/customize/optimize/</a>.</p>
  <p>I successfully imported the style but I cannot find a proper way to import the necessary js.
  I have created a <code>bootstrap.js</code> file in the <code>public</code> directory as following :</p>
  <pre><code>// import 'bootstrap/js/dist/alert';
  import 'bootstrap/js/dist/button';
  // import 'bootstrap/js/dist/carousel';
  import 'bootstrap/js/dist/collapse';
  import 'bootstrap/js/dist/dropdown';
  // import 'bootstrap/js/dist/modal';
  // import 'bootstrap/js/dist/popover';
  // import 'bootstrap/js/dist/scrollspy';
  // import 'bootstrap/js/dist/tab';
  // import 'bootstrap/js/dist/toast';
  // import 'bootstrap/js/dist/tooltip';
  </code></pre>
  <p>And added this file in the meta section of nuxt.config.ts to make sure the file is called in the head section of my page so the javascript is available everywhere</p>
  <pre><code>meta: {
      script: [
          { src: 'js/bootstrap.js' }
      ],
  }
  </code></pre>
  <p>But I keep having an error :</p>
  <blockquote>
  <p>Uncaught SyntaxError: Cannot use import statement outside a module</p>
  </blockquote>
  <p>I understand it is because Vite does not compile it, but I don't know how to make it do so.. has someone an idea how to do it ?
  Thanks !</p>