Nuxt

정리

• Nuxt v2.0에서 v2.11로 마이그레이션
• Nuxt에서 TypeScript로 개발하기
• Nuxt v2.3.4에서 v2.13.1로 마이그레이션
• nuxt/typescript v2.11에서 v2.12로 마이그레이션

메모

• 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 기준
    • Nuxt TypeScript
    • Nuxt TypeScript에서 Jest 설정
    • Nuxt TypeScript에서 ESLint 설정
• 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 순서 확인