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'],
},
};