fix(nuxt): use bundle for development mode (closes #3397) (#3399)

Author: Pooya Parsa

.eslintignore

@@ -3,4 +3,4 @@ dist/
 docs-dist/
 es/
 node_modules/
-nuxt/plugin.template.js
+nuxt/plugin.*.js

docs/markdown/intro/README.md

@@ -239,6 +239,11 @@ Note that when importing individual components, any component aliases will **not
   </p>
 </div>
 
+Do not use the Nuxt module If you want to import individual BootstrapVue components into _specific_
+pages and/or components of your Nuxt app. Instead follow the [module bundlers](#using-module-bundlers)
+section above as well as the
+[selective import](#selective-component-and-directive-inclusion-in-module-bundlers) sections below.
+
 ### Passing custom BootstrapVue config with Nuxt.js
 
 If you need to pass a custom
@@ -256,25 +261,6 @@ module.exports = {
 }
 ```
 
-### Using pretranspiled version of BootstrapVue for Nuxt.js
-
-Nuxt.js module uses the precompiled version of BootstrapVue (`es/`) for faster development builds
-and the source (`src/`) of BootstrapVue for higher quality production builds.
-
-You can override this option using `usePretranspiled` option. Setting to `true` uses `es/` instead
-of `src/`. By default `usePretranspiled` is enabled in development mode only.
-
-<div class="alert alert-info">
-  <p class="mb-0">
-    <b>Note:</b> if you are also importing individual components, directives or plugins
-    <em>within</em> your Nuxt app as well as via the tree-shaking options above, you will want to
-    set the <code>usePretranspiled</code> option to match the directory you are importing from
-    (i.e. use <code>true</code> if importing from <code>bootstrap-vue/es</code> or
-    <code>false</code> if importing from <code>bootstrap-vue/src</code>). Otherwise, you may end
-    up with a larger bundle size due to code duplication.
-  </p>
-</div>
-
 ## Vue CLI 2
 
 <span class="badge badge-warning small">DEPRECATED</span> Use [Vue CLI 3](#vue-cli-3) instead.

nuxt/index.js

@@ -49,12 +49,7 @@ module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
     // Transpile src/
     this.options.build.transpile.push('bootstrap-vue/src')
 
-    // Use es/ or src/
-    const usePretranspiled = pickFirst(options.usePretranspiled, this.options.dev)
-
-    const templateOptions = {
-      dist: usePretranspiled ? 'es' : 'src'
-    }
+    const templateOptions = {}
 
     // Specific component and/or directive plugins
     for (const type of ['componentPlugins', 'directivePlugins']) {
@@ -88,7 +83,7 @@ module.exports = function nuxtBootstrapVue(moduleOptions = {}) {
 
     // Register plugin, passing options to plugin template
     this.addPlugin({
-      src: resolve(__dirname, 'plugin.template.js'),
+      src: resolve(__dirname, `plugin.${this.options.dev ? 'dev' : 'prod'}.js`),
       fileName: 'bootstrap-vue.js',
       options: templateOptions
     })

nuxt/plugin.dev.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import BootstrapVue from 'bootstrap-vue'
+
+Vue.use(BootstrapVue, <%= JSON.stringify(options.config, undefined, 2) %>)

nuxt/plugin.template.js renamed to nuxt/plugin.prod.js

@@ -8,16 +8,16 @@ import Vue from 'vue';
 <% if (options.componentPlugins.length || options.components.length) { %>
 import {
   <%= [].concat(options.componentPlugins, options.components).filter(Boolean).join(',\n  ') %>
-} from 'bootstrap-vue/<%= options.dist %>/components';
+} from 'bootstrap-vue/src/components';
 <% } %>
 <% if (options.directivePlugins.length || options.directives.length) { %>
 import {
   <%= [].concat(options.directivePlugins, options.directives).filter(Boolean).join(',\n  ') %>
-} from 'bootstrap-vue/<%= options.dist %>/directives';
+} from 'bootstrap-vue/src/directives';
 <% } %>
 
 <% if (options.config) { %>
-import BVConfigPlugin from 'bootstrap-vue/<%= options.dist %>/bv-config';
+import BVConfigPlugin from 'bootstrap-vue/src/bv-config';
 
 Vue.use(BVConfigPlugin, <%= JSON.stringify(options.config, undefined, 2) %>)'
 <% } %>
@@ -33,7 +33,7 @@ options.directives.reduce((acc, d) => (acc += `Vue.directive('${d.replace(/^VB/,
 %>
 
 <% } else { %>
-import BootstrapVue from 'bootstrap-vue/<%= options.dist %>';
+import BootstrapVue from 'bootstrap-vue/src';
 
 Vue.use(BootstrapVue, <%= JSON.stringify(options.config || {}, undefined, 2) %>);
 <% } %>