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,...