Vue + Nuxt + Handsontable 정리

0. 환경
- Vue 2.6
- Nuxt 2
- handsontable 7.1
- @handonsable/vue 4.1

1. 설치
1) 패키지 설치
https://handsontable.com/docs/7.1.1/frameworks-wrapper-for-vue-installation.html 일단 이 페이지 안내대로 설치한다.

2) nuxt에 적용
보통 외부 패키지를 사용하려면 https://ko.nuxtjs.org/guide/plugins/#vue-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8 이렇게 하는데 플러그인을 만드는 방법이 좀 다르다.
https://github.com/handsontable/vue-handsontable-official/issues/70 이 페이지를 참조해서 아래와 같이 작성했다.

import Vue from 'vue'
import { HotTable } from '@handsontable/vue'

export default () => {
if (process.client) {
Vue.component('hot-table', HotTable)
}
}

nuxt.config.js에는 아래 코드를 추가.

...

css: [
'CSS파일경로/handsontable.full.css'
],
plugins: [
...
{src: '~/plugins/플러그인이름.js', ssr: false}
],

클라이언트에서만 적용되는 라이브러리라 그런 것 같다.

2. startRows/startCols와 data property

startRows/startCols보다는 data property가 우선된다.

예를 들어 startRows=10 startCols=10 data=[[null, null, null, null, null], [null, null, null, null, null]]로 초기화하면 2행 5열짜리 시트가 만들어진다.

기록