[nuxt3] 초기 프로젝트 설정 (with. eslint, prettier, quasar 모듈)

최근에 nuxt3를 학습하기 시작하면서 적용한 경험을 공유합니다.

설치

https://nuxt.com/docs/getting-started/installation

npm create nuxt <project-name>

 

nuxt create cli 화면

위 명령어를 실행하면 CLI로 관련 설치를 진행할 수 있습니다.

패키지 매니저 설정 ->  git repository 설정 -> 관련 라이브러리 설치 순으로 진행되었습니다.

저는 npm 설정 및 git repository 설정 그리고 다음과 같은 라이브러리를 설치했습니다.

관련 라이브러리 설치

 

일단 저도 시작하는 입장이라 .필요할것 같은 애들을 체크해서 설치하였습니다.

그러나 그러나 eslint 설정은 꼭 필요하니 @nuxt/eslint 는 꼭 체크 하시기 바랍니다. ✔️ 

추가 설치

prettier 설치 및 적용

npm install -D prettier @vue/eslint-config-prettier

@vue/eslint-config-prettier 는 eslint-config-prettier 확장 버전으로 eslint와 prettier를 충돌없이 사용할 수 있게해줍니다.

prettier를 설치했으면 루트에 설정파일을 생성해줍니다.

 

 

.prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "bracketSpacing": true,
  "endOfLine": "auto"
}

그리고 eslint와 같이 사용하기 위해서  eslint 설정 파일인 eslint.config.mjs 에 다음과 같이 설정합니다.

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
import prettierConfig from '@vue/eslint-config-prettier'

export default withNuxt(
  {
    rules: { // rule 입력
      'no-console': 'off',
    },
  },
  prettierConfig,
)
// Your custom configs here

일전에 @nuxt/eslint 설치로 eslint 초기설정은 되어 있어 한결 수월하네요. (타입스크립트 설정도 그렇구요 😁 )

위에 eslint, prettier 설정은 @vue/eslint-config-prettier 공식 페이지에서 확인하실수 있습니다.

 

Quasar 모듈 설치

저는 quasar를 사용할 것이기 때문에 quasar 모듈을 설치해보겠습니다.

nuxt 공식 페이지 - Integration - Modules

qusar 모듈 검색

위와 같이 검색하여 페이지에 들어가면 모듈 설치 방법이 나와 있습니다. 아래 명령어로 quasar 설치를 진행합니다.

# Using npm
npm install quasar @quasar/extras
npx nuxi@latest module add quasar

 

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },

  modules: [
    '@nuxt/content',
    '@nuxt/eslint',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/test-utils',
    'nuxt-quasar-ui',   // quasar 모듈 추가 확인
  ],
  // quasar 설정 추가
  quasar: {
    // Configurable Component Defaults
    components: {
      defaults: {
        QBtn: {
          dense: true,
          flat: true,
        },
        QInput: {
          dense: true,
        },
      },
    },
  },
})

위에 quasar 설정은 기본 설정인데 가이드대로 추가해보았습니다. 컴포넌트 기본 설정은 필수는 아니니, 모듈만 추가하면 사용할 수 있습니다. 😀

이제 기본 structure 구성을 해보겠습니다.

 

기본 structure 구성

nuxt 프레임 워크는 정의된 structure를 기반으로 동작을 하게 되있고, 다음과 같은 약속된 디렉토리가 있습니다.

• layouts
  • 페이지 기본 레이아웃을 설정하는 디렉터리, 관련 컴포넌트로는 NuxtLayout이 있습니다.
• pages
  • 파일기반 라우팅 컴포넌트들이 위치하는 디렉터리, 관련 컴포넌트로는 NuxtPage가 있습니다.
• components
  • 사용할 컴포넌트를 위치시키는 디렉터리

https://nuxt.com/docs/guide/directory-structure/app 에서 기본 nuxt structure구조를 상세히 알 수 있습니다!

AutoImport ⭐  를 기반으로 디렉터리와 컴포넌트만 위치시키면 import없이 사용할 수 있으니 Vue 프로젝트만 하셨던 분들은 훨씬 편하다는 것을 체감하실수 있을것 같습니다. 👍

(Vue 프로젝트에서 unplugin-auto-import, unplugin-vue-components가 패키지가 Nuxt에 내장된게 아닌가 생각되네요.)

 

그럼 파일을 생성해봅시다.

layouts/default.vue

<script setup lang="ts"></script>
<template>
  <div>
    <slot />
  </div>
</template>

<style scoped></style>

slot을 이용하여 view를 재정의 할 수 있습니다.

 

pages/index.vue

AppCard 컴포넌트(아래에서 확인!) 를 렌더링 하는 기본 구조입니다.

<template>
  <div>
    <AppCard />
  </div>
</template>

<script setup lang="ts"></script>

components/AppCard

quasar 컴포넌트를 활용하여 마크업 해보았습니다.

<template>
  <q-card class="my-card">
    <q-card-section>
      <div class="text-h6 ellipsis">Nuxt3 기본편</div>
      <div class="text-subtitle2 ellipsis text-grey-8">
        Nuxt 3 전체적인 스펙을 살펴봅시다.
      </div>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts"></script>

app.vue

NuxtLayout, NuxtPage 를 사용하여 기본 layout 컴포넌트와 page를 렌더링 합니다.

기본 layout은 default.vue가 사용될 것이고, 루트로 접속하면 pages/index.vue 가 렌더링 되겠죠? 😀

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

최종 structure

자 그럼 개발서버를 실행하여 확인해보겠습니다.

npm run dev

실행 화면

네 이렇게 기본 프로젝트 구성하는 방법을 살펴보았습니다.

nuxt3 처음이라 모든게 낯설었는데, 글로 정리하면서 다시 되새김질하니 좀더 친숙해진 기분입니다.

Vue3에서 Nuxt3 프로젝트로 시작하시는 분들에게 좀 도움이 됬었으면 좋겠네요. 감사합니다.