Nuxt - ChoDragon9/posts GitHub Wiki

정리

메모

css 분리

// nuxt.config.js
  build: {
    ...
    extractCSS: true,
    optimization: {
      splitChunks: {
        chunks: 'all',
        automaticNameDelimiter: '.',
        name: true,
        cacheGroups: {}
      }
    },
    splitChunks: {
      layouts: true
    }
  },

Nuxt webpack-bundle-analyzer: https://nuxtjs.org/api/configuration-build/#analyze
webpack external
- https://webpack.js.org/configuration/externals/
- https://nuxtjs.org/api/configuration-build#extend
타임아웃 테스트
- 서버 응답 타임아웃: Nuxt Proxy에서 option.timeout을 100로 설정해서 확인
- 클라이언트 요청 타임아웃: $axios.create({timeout: 100})로 확인
외부 접근 설정: nuxt.config.ts에서 server:{host: '0.0.0.0'}
- IE 에서는 Listening on 나오는 주소로 접근하지 않으면 없는 주소로 나옴
에러 페이지 처리
- /layouts/error.vue 컴포넌트로 처리
- props로 error 프로퍼티가 전달됨
- error는 {message: string, statusCode: number} 형태임
- Context.error 함수를 통해 에러 페이지로 이동 시킬 수 있음
Nuxt Upgrade
Nuxt Proxy
Nuxt란
Nuxt 폴더구조
Vue ESLint
- plugin:vue/recommended 기본룰만 사용할 필요없이, eslint-plugin-vue에 강력한 룰이 많음
Vuex
- Nuxt Vuex
- Vuex TypeScript
커스텀
- nuxt v2.11 기준
  - Nuxt TypeScript 2.11
- nuxt v2.0 기준
Vuex State에 postfix 사용
Smooth Scroll

const SCROLL_TO_OPTION: ScrollToOptions = {
  top: 0,
  behavior: 'smooth'
}
window.scrollTo(SCROLL_TO_OPTION)

Vuex 다른 모듈 Action 사용

dispatch('auth/action', {...}, { root: true })

@nuxt/typescript-build
- 경우에 따라 빌드 시 lint 체크 안되도록 처리

  buildModules: [
    [
      '@nuxt/typescript-build',
      {
        typeCheck: {
          eslint: IS_LOCAL
        },
        ignoreNotFoundWarnings: true
      }
    ]
  ],

error.vue, default.vue CSS 순서 확인