Nuxt.js (universal) で vuejs-datepicker を使う #Vue.js

import DatePicker from 'vuejs-datepicker';

では mode: universal で動かないので、ひと手間加える

nuxt 2.11.0
vuejs-datepicker 1.6.2

そのままでは動かない理由

import すると vuejs-datepicker/dist/vuejs-datepicker.js を参照するが、
<head> に css を注入するコードがある

node_modules/vuejs-datepicker/dist/vuejs-datepicker.js

  var HEAD = document.head || document.getElementsByTagName('head')[0];

SSR 時に document は存在しないので、エラーになる

動くようにする

stylus インストール

vuejs-datepicker はスタイリングに stylus を使用しているので扱えるようにする
下記のコマンドだけで大丈夫だった

yarn add --dev stylus stylus-loader

import を変更

vuejs-datepicker/src 内の .vue を直接 import する

ExampleComponent.vue

<template>
  <date-picker />
</template>

<script>
import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue';

export default {
  components: {
    DatePicker,
  },
};
</script>

おまけ: locale も src から読み込む

ExampleComponent.vue

<template>
  <date-picker :language="ja" />
</template>

<script>
import DatePicker from 'vuejs-datepicker/src/components/Datepicker.vue';
import ja from 'vuejs-datepicker/src/locale/translations/ja';
// 下記は、ja以外の言語もすべてバンドルされてしまうので推奨されない
// import { ja } from 'vuejs-datepicker/src/locale';

export default {
  components: {
    DatePicker,
  },
  data() {
    return {
      ja,
    };
  },
};
</script>

おまけ: IE11 対応

基本的にライブラリ内のコンポーネントはコンパイルされず、IE11 に対応したコードが出力されない
nuxt.config.js の transpile に追加する

nuxt.config.js

export default {
  build: {
    transpile: ['vuejs-datepicker'],
  },
};