기록

 좋은 방법인지는 모르겠지만 나는 이렇게 사용중 1. js 파일 작성   예를 들면 아래 같이 assets/js/common.js 파일 하나를 작성 export function sum (a, b) {   return a + b; } 2. 플러그인 파일 작성   plugins 디렉토리에 아래처럼 플러그인 파일 작성. 이름은 예를 들면 global.js i mport Vue from 'vue' import * as Common from '../assets/js/common' Vue.prototype.$common = Common 3. 플러그인 등록   nuxt.config.js에 아래처럼 플러그인 등록. ssr 설정은 옵션 plugins: [   {src: '~/plugins/global.js', ssr: false}, ] 4. 컴포넌트에서 사용   html에서는 $common.sum(1, 2) 처럼 script에서는 this.$common.sum(1, 2) 처럼 사용하면 된다

<div class="container">       <div v-html="내용"></div>, </div> ... 내용 = <p class="line"></p> ... <style scoped>     .line {          color: red;      } </style> 이런식으로 v-html을 사용하면 .line의 css가 적용이 안되는 경우가 있는데, scoped 때문이다. <style>     .container .line {          color: red;      } </style> scoped를 제외하고 style 태그를 한 번 더 써서 정의해주면 된다. 단, 다른 컴포넌트에 같은 이름의 class가 있으면 영향받지 않게 정확하게 정의해줘야 한다.

0. 상황 - Nuxt 1.4.0 - Vue 2.5.16   window.addEventListener('message', someFunc);를 추가하니 "Cannot read property toLowerCase of undefined" 오류가 발생했다. 1) someFunc : 단순히 이벤트를 받아서 넘어온 인자를 확인하고 현재 컴포넌트의 data에 설정하는 함수. 대충 표현하자면 이런 코드이다. somFunc: function (event) {   if (event.data && event.data.type === 'TYPE') {     this.someVal = event.data.value;   } } 2) 넘어오는 값   parent window에서 오류가 발생한 페이지를 iframe으로 불러오고 onload되면 아래처럼 보낸다. (iframe).contentWindow.postMessage({type: 'TYPE', value: 'VALUE'}, '*');  1. 해결   addEventListenr함수의 3번째 인자로 false를 추가했다. window.addEventListener('message', someFunc, false ); 3번째 인자는 listener에 대한 옵션으로 boolean값으로 주면 들어온 이벤트를 전파하는 방법(이벤트 순서)을 설정할 수 있다. true면 capturing을 사용, false면 하지 않겠다는 뜻이다. (bubbling하겠다는 건지는 정확히 모르겠다) addEventListner와 이벤트 순서에 대한 상세는 아래 페이지들 참조. https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener https://www.quirksmode.org/js/events_or...

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

0. 환경 - Vue 2.6 - vue-konva 2.0 1. @click.stop   @click.stop을 쓰면 오류가 발생한다. 자동으로 전달되는 이벤트 객체가 일반 javascript 이벤트 객체가 아니기 때문이다. 일반 javascript의 event객체는 konva가 넘겨주는 event 객체에서는 event.evt로 찾아와야 한다. 즉 event.stopPropagation() === event.evt.stopPropagation()

0. 환경 - nuxt 2.0.0 - vuetify 2.0.0 1. nuxt    https://ko.nuxtjs.org/guide/installation  한국어 버전 nuxt 공식 홈페이지에서 starter template를 다운받아서 사용했다. 영어 홈페이지에 들어가니 create-nuxt-app을 사용하라는 걸 보니까 그냥 다운받은게 문제인 것 같기도 하다. 2. vuetify   https://vuetifyjs.com/en/getting-started/quick-start  역시 공식 홈페이지를 따라했다. 첫 설치 시 dist/index.html이 없다는 오류가 발생했지만 무시. 컴파일 에러가 발생하지는 않지만 전혀 적용이 안된다. 3. nuxt-vuetify 설치    https://www.npmjs.com/package/@nuxtjs/vuetify  여기서 시키는대로 설치하면 적용은 된다. 4. custom theme    적용은 되는데 custom theme을 option에 넣어도 적용이 안됨. https://stackoverflow.com/questions/56074338/nuxt-vuetify-how-to-apply-theme-colors/56076778  이 페이지를 참고해서 nuxt.config.js에 아래처럼 작성하면 적용된다. modules: [   ['@nuxtjs/vuetify'] ], vuetify:{   theme: {     themes: {       light: {         primary: "#5755d9",          secondary: "#444291",          accent: "#444...

* Vue component의 최상위 template 태그   Vue component의 최상위 template 태그 아래에는 반드시 하나의 root element만 있어야 한다. v-if를 사용했다면 반드시 v-else(v-else-if)를 사용해서 렌더링되는 root element는 하나만 있도록 해야 한다.