Naxt.jsでインストールしたライブラリが使用できません。

Question

Vue.js最近を触り始めた、プログラミング初心者です。
「vue-js-toggle-button」というスイッチボタンを実装するライブラリ(https://github.com/euvl/vue-js-toggle-button?ref=kabanoki.net)を見つけて試してみたのですが動いてくれません。ブラウザ上にはエラーメッセージも表示されず真っ白な状態です。
(npm install vue-js-toggle-button --save)←これでインストールしました。
表示される方法ご存じの方がいらしたら教えていただけるとありがたいです！

<template>

<div>
  <toggle-button @change="onChangeEventHandler"></toggle-button>
  <toggle-button v-model="myDataVariable"></toggle-button>  
</div>
</template>

<script>

import ToggleButton from 'vue-js-toggle-button'


export default {
    components: {
    
    },
      data: {
    myDataVariable: ''
   },
   methods: {
    onChangeEventHandler: function(){
      console.log('onChangeEventHandler');
    }
    }
    
  
};

</script>

Answer 1

コンポーネントとして使いたい場合、

import ToggleButton from 'vue-js-toggle-button'
export default {
components: {
  ToggleButton
},
}

のような感じでimport + コンポーネント読み込みを行えばコンポーネントとして使用することができると思います。

---

その他のやり方として、nuxtの場合、pluginフォルダの任意のファイルに

import ToggleButton from 'vue-js-toggle-button'
Vue.use(ToggleButton)

を記載。
nuxt.config.jsでそのプラグインを読みこめば使用することができると思います。

使い方についてこちらが参考になります。

• https://www.kabanoki.net/4336/
• https://jsfiddle.net/kabanoki/a0yLhuvm/

Comments

[auo_1776]

ご丁寧にご回答ありがとうございます！コンポーネントとして使いたくてその方法を試したんですけど出来ませんでした。

node_modules/vue-js-toggle-button/dist/index.jsのファイルの中の

```js
return styleElement
}

function addStyle (obj / StyleObjectPart /) {
var update, remove
var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')

if (styleElement) {
if (isProduction) {
// has SSR styles and in production mode.
// simply do nothing.
```
の中の
```js
var styleElement = document.querySelector('style[data-vue-ssr-id~="' + obj.id + '"]')
```
の部分にエラーが出でいる状態です。

pluginフォルダの任意のファイルに記載させて頂く方法も試してましたが同じエラーが出て来てしまいます・・・！

[jackmiwamiwa]

そのライブラリがssrに対応していないためのエラーだと思います。(documentなど)
対応する場合、こちらの記事を参考にすればできると思います。
https://qiita.com/su_mi1228/items/4e39c2ae5f45413a85be

[auo_1776]

解決しました！とっても助かりましたありがとうございます！