여기, Nuxt+TypeScript를 제대로 하기 시작해 어느 정도 형태가 생겨 왔으므로, 초기 구축 부분을 메모합니다. 기분으로 추기해 갑니다.

템플릿을 만들어 두면 반년 정도 하면 사용할 수 없게 되므로, 순서를 써 두는 것이 조금 시간은 걸립니다만 도움이 될 것 같습니다.

Nuxt 초기 설치

빨리 설치합니다. 세세한 부분은, 프로젝트에 맞추어입니다만, 나중에 수고를 줄일 수 있습니다.

$ yarn create nuxt-app <project-name>
create-nuxt-app v3.6.0

? Project name: (app)
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Element
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG) 
? Deployment target: Server (Node.js hosting)
? Development tools: None
? Continuous integration: None
? Version control system: Git

모듈 추가 등

nuxt-property-decorator

기사에 따라 TypeScript를 작성하는 방법이 다르게 복사되면 움직이기 때문에 혼란 스러웠습니다.
3 계열 등이 있음을 깨달았습니다 (느린. 여기를 읽고 이해할 수있었습니다. 감사.

여러가지 시도한 결과, 개인적으로는 property-decorator에 침착했습니다.

설치

yarn add nuxt-property-decorator

기본 서식

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  asyncData() {
    return {}
  },
})
export default class SampleComponent extends Vue {}
</script>

참고

↓ 매번 보고 있습니다

TailwindCSS

별로 굳은 물건을 만들지 않기 때문에, 기본은 Elemets등의 컴퍼넌트를 이용합니다만, 세세한 부분등에서 커스터마이즈가 필요한 경우에 CSS를 쓰는 것보다 html안에 섞이므로 개인적으로는 빠르고 좋아 되었습니다.

설치

기본은 여기와 같습니다.

yarn add -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest
npx tailwindcss init

설정

nuxt.config.js

export default {
  buildModules: ['@nuxtjs/tailwindcss'],
  ...
}

tailwind.config.js

 module.exports = {
   ....
   purge: [
     './components/**/*.{vue,js}',
     './layouts/**/*.vue',
     './pages/**/*.vue',
     './plugins/**/*.{js,ts}',
     './nuxt.config.{js,ts}',
   ],
   ...
  }

dayjs

날짜 처리는 최근 dayjs를 사용하고 있습니다. 여러 곳에서 날짜 조작은 나오므로 모듈로 넣고 있습니다.

설치

yarn add @nuxtjs/dayjs

설정

export default {
  ...
  modules: [
    '@nuxtjs/dayjs',
  ],
  ...
}

사용법

모듈이므로 $dayjs()에서 사용할 수 있습니다.

nuxt-firebase

firebase를 사용하는 것은 최근에 이것이 가장 쉬운 느낌입니다.

설치

yarn add firebase
yarn add @nuxtjs/firebase

설정

nuxt.config.js

modules: ['@nuxtjs/firebase'],

firebase: {
  config: {
    apiKey: '<apiKey>',
    authDomain: '<authDomain>',
    projectId: '<projectId>',
    storageBucket: '<storageBucket>',
    messagingSenderId: '<messagingSenderId>',
    appId: '<appId>',
    measurementId: '<measurementId>'
  },
  services: {
    auth: true // Just as example. Can be any other service.
  }
}

사용법

$fire 또는 static의 것은 $fireModule 를 사용합니다.

element

빨리 만들 수 있으므로 개인적으로 좋아. 그렇지만 어느 쪽인가라고 하면 문자 얇고 예쁘지만, 보기 어렵다고 하는 사람도 있네요.