How do I make selection.js available in Nxt.js?

I'd like to use Selection.js in Nxt.js(Vue), but how can I set it up?

• Simonwep/selection

For example, moment.js became available as follows, but selection.js didn't work.

./nuxt.config.js

const webpack=require('webpack')

module.exports={
  build: {
    ...
    vendor:
      'moment'
    ],
    plugins: [
      new webpack.ProvidePlugin({
        'moment': 'moment'
      })
    ]
  },
  ...
}

Add results when you try the following methods:

./nuxt.config.js

module.exports={
  (as it was when it was generated in vue init...)
  ...
  mode: 'spa'
}

./pages/index.vue

<template>
  <section class="container">
    <ul>
      <lib-for="binbs":key="b.name">
        {{ b.name}}
      </li>
    </ul>
  </section>
</template>

<script>
  import Selection from '@simonwep/selection-js'

  export default {
    data(){
      US>return{
        bs: [...new Array(10)].map(b,i)=>{
          US>return{
            name —`b${i}`,
          };
        })
      }
    },
    mounted() {
      constoptions={
        containers: ['ul',]
        boundaries: ['ul',]
      };
      Selection.create(options)
    }
  }
</script>

The results are as follows.

If you look at the error message below, line 353(1) of selection.js says Unexception token.

The 353rd line is "...options"(2), so I thought I couldn't interpret spread syntax, so I rewritten package.json in selection.js as follows.

./node_modules/@simonwep/selection-js/package.json

"main": "selection.min.js",....................................(1)
...
"scripts": {
  "build": "babel selection.js --out-file selection.min.js" ...(2)
},

If you look at (2) above, the transpile result by Babel is selection.min.js, so if you specify selection.min.js in (1) above and npm run dev again, you could use selection.js as shown in the picture below.

In the end, all you have to do is specify to use selection.min.js without tampering with the package.json of selection.js.

The only way to specify it is as follows:

./pages/index.vue

import Selection from '@simonwep/selection-js/selection.min.js'

I want to use other .vue, so how can I write it in nuxt.config.js?

I was rewriting webpack.ProvidePlugin by referring to the following.

webpack v4.8.3/ProvidePlugin/Usage:Vue.js
https://webpack.js.org/plugins/provide-plugin/ #usage-vue-js

new webpack.ProvidePlugin({
  Vue: ['vue/dist/vue.esm.js', 'default']
})

It won't work, so if you read the source code below, it will be different from what the above sample expects.

node_modules\webpack\lib\ProvidePlugin.js

This is a webpack 4 document.
The v3 documentation is not found.

When I set it to match the source code, it worked as follows.

./nuxt.config.js

build:{
  ...
  plugins: [
    new webpack.ProvidePlugin({
      'Selection': '@simonwep/selection-js/selection.min.js'
    })
  ]
},
mode:'spa' 

You use webpack v3.12.0 for nuxt v1.4.0.

Where is the documentation for webpack v3?