기록

 좋은 방법인지는 모르겠지만 나는 이렇게 사용중 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) 처럼 사용하면 된다

Adsense에서 제공하는 태그가 이런 형식이면 <script data-ad-client="CLIENT" async src="SRC"></script> nuxt.config.js 의 head.script 부분에 이렇게 추가하면 된다. head: { ... script: [ ... {src: 'SRC', 'data-ad-client': 'CLIENT', 'async': true} ... ], ... },

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. 환경 - ubuntu 16.04 - nuxt 2.10 - node.js 4.6 -> 8.16.2 - npm 3.5 -> 6.4 - nginx 1.10 1. fibers 패키지 설치 오류   nuxt의 dependency인 fibers가 설치가 안돼서 nuxt도 설치되지 않는 문제가 발생했다. fibers 설치 시 node 명령어를 찾아오지 못하는 문제였다. 아래 명령어로 강제로 링크시키면 된다. ln -s /usr/bin/nodejs /usr/bin/node 오류 메시지에 ubuntu 사용자면 apt-get install g++ build-essential 를 실행하라는 메시지가 나오는데 이미 설치되어 있는 것 같다. 2. nuxt를 실행시킬 수 없는 오류   오류 메시지로 node.js를 최신 버전으로 업그레이드하라는 말이 나와서 업그레이드. https://github.com/nodesource/distributions/blob/master/README.md  이 페이지를 참조해서 8.6.12 버전으로 업그레이드했다. 참고로 "curl -sL https://deb.nodesource.com/setup_버전.x | sudo -E bash -" 로 바꾸면 다른 버전도 설치할 수 있다. nvm을 사용해도 되지만 사용자가 여럿일 경우 설치를 진행한 사용자가 아닌 사용자가 nodejs를 사용할 수 없어서 nvm 삭제 후 다시 설치했다. 어떻게(?) 하면 되는 것 같지만 저 위의 방법이 더 편하다. 3. fibers 문제 다시 발생  devDependencies에 있던 fibers를 지우니까 된다... node_modules/를 지우고 전체 패키지를 재설치했다 (sudo npm install) . 4. nginx 설정   사이트 주소로 들어오면 3000포트로 연결하도록 설정하면 된다. nginx경로/sites-enabled/default(파일 이름 변경...

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. 환경 - 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는 하나만 있도록 해야 한다.