Nuxt.js Config & Plugins & Modules & Mixins

1. nuxt.config.js

Nuxt.js.org - configuration 파트 참조

1) mode : 'universal ' - pre rendering 필요할 때, 필요 없으면 spa로 해도 된다. 

2) head - html의 head 영역이랑 같다. - 특정 페이지에만 적용하고 싶으면 해당 pages 하위 component에 head:{

} 이렇게 넣어주면 된다.  

3) loading : 맨위에 처리되는 것 보여준다.

비 활성화 하려면 loading:false 작성

spa에서 -> loadingIndicator:{

name: ' circle ',

color: '#dddd'

}  

가운데 동그라미~~ 로딩될 때

 

4) css :  global css  assets 하위 경로 넣어주면 된다.

5) env : {

     baseUrl : process.env.BASE_URL || ' https:// nuxt-blog.firebaseio.com ' 

} 

이렇게 설정하고 process.env.baseUrl로 갖다 쓰면 된다. 

6) static page generation

generate:{

}

7) router

router : {

}

 

8) srcDir : 

9) transition: {

 name : 'page'

mode: ' out-in'

2. Plugins

글로벌하게 사용할 컴포넌트들 넣어서 사용가능하다.  

 

 1) .js파일 plugins 폴더 하위에 넣어주기 

 2) 글로벌하게 사용할 컴포넌트 넣어주고 nuxt.config.js의 plugins: [에 넣어주기 ] 

 3) date 같은 것

 4)

https://joshua1988.github.io/vue-camp/reuse/plugins.html#%E1%84%91%E1%85%B3%E1%86%AF%E1%84%85%E1%85%A5%E1%84%80%E1%85%B3%E1%84%8B%E1%85%B5%E1%86%AB-%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC-%E1%84%87%E1%85%A1%E1%86%BC%E1%84%87%E1%85%A5%E1%86%B8

Plugins | Cracking Vue.js

 

3. Modules

modules: [
  '@nuxtjs/axios',
],
axios: {
  baseURL: process.env.BASE_URL || 'https://nuxt-blog.firebaseio.com',
  credentials: false
},

axios 이런 식으로 사용 context.app.$axios 

1) 

return context.app.$axios
  .$get("/posts.json")
  .then(data => {
    const postsArray = [];
    for (const key in data) {
      postsArray.push({ ...data[key], id: key });
    }
    vuexContext.commit("setPosts", postsArray);
  })
  .catch(e => context.error(e));

2) 

return context.app.$axios
  .$get(
    process.env.baseUrl + "/posts/" +
      context.params.postId +
      ".json"
  )
  .then(data => {
    return {
      loadedPost: { ...data, id: context.params.postId }
    };
  })
  .catch(e => context.error());

 

4. Mixins

Vue 컴포넌트에 재사용 가능한 기능을 배포하는 방법이다. mixin 객체는 모든 구성요소 옵션(data, methods, components, directives)을 포함할 수 있다. 컴포넌트에 mixin을 사용하면 해당 mixin의 옵션이 모든 컴포넌트 고유 옵션에 "혼합"된다. 

 

4-1) data

data 오브젝트의 내용이 상충하는 경우, 컴포넌트에 선언된 data 오브젝트를 우선적으로 하여 재귀적으로 병합된다. 

 

4-2) methods, components, directives와 같은 객체 값을 요구하는 옵션은 같은 객체에 병합된다. 이러한 객체에 충돌하는 키가 있을 경우 컴포넌트의 옵션이 우선순위를 갖는다. 

 

4-3) 전역 Mixin

전역 mixin은 모든 Vue 인스턴스에 영향을 미친다. 신중히 사용

 

참조 : https://kr.vuejs.org/v2/guide/mixins.html

믹스인 — Vue.js

https://itmining.tistory.com/123

[Vue.js] Vue Mixins란?

https://velog.io/@bluestragglr/Vue.js-Mixin-%EA%B8%B0%EB%8A%A5-%EB%B0%98%EB%B3%B5-%EC%A0%9C%EA%B1%B0%ED%95%98%EA%B8%B0

Vue.js Mixin: 기능 캡슐화하기