Vue & Wijmoクイックスタート【2019年版】
https://devlog.grapecity.co.jp/entry/2019/03/12/wijmo-vue-quickstart
こちらを参考にいま開発しているプロジェクトにWijimoを導入してみた。
上記の設定通りにNuxt @ v2.14.12で実行すると、「window is not defined」となってしまう。
いろいろ調べたところ、nuxt.config.jsのpluginsにSSR回避の設定をしないとダメなようだ。
plugins: [
{src: './node_modules/@grapecity/wijmo.vue2.grid',mode: 'client'},
{src: './node_modules/@grapecity/wijmo.cultures/wijmo.culture.ja',mode: 'client'},
{src: './node_modules/@grapecity/wijmo.styles/wijmo.css',mode: 'client'},
],
<template>
<v-container>
<v-layout wrap justify-end mb-2>
<v-flex>
<wj-flex-grid :itemsSource="gridData">
<wj-flex-grid-column header="ID" binding="id" :width="60"></wj-flex-grid-column>
<wj-flex-grid-column header="商品名" binding="product" :width="200"></wj-flex-grid-column>
<wj-flex-grid-column header="受注日" binding="date" :width="120"></wj-flex-grid-column>
<wj-flex-grid-column header="金額" binding="amount" :width="100" format="c"></wj-flex-grid-column>
</wj-flex-grid>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data () {
return {
gridData: [
{ id: 15, product: 'ピュアデミグラスソース', date: '2017/01/10', amount: 6000 },
{ id: 17, product: 'だしこんぶ', date: '2017/01/08', amount: 14500 },
{ id: 18, product: 'ピリカラタバスコ', date: '2017/01/12', amount: 4000 },
{ id: 84, product: 'なまわさび', date: '2017/01/21', amount: 8000 }
]
}
}
}
</script>
<style>
</style>
無事動作。