Quasar 프레임워크 기초

Quasar는 Vue.js 기반 프레임워크다. 머티리얼 디자인 스타일의 UI 컴포넌트를 많이 제공해서 화면을 빠르게 만들 수 있고, 같은 코드로 SPA·SSR·PWA·모바일 앱(Capacitor/Cordova)·데스크톱 앱(Electron)까지 빌드할 수 있다. CSS 프레임워크처럼 쓰면서도 레이아웃·라우팅 구조까지 정해 주는 점이 특징이다.

문법 규칙

대상	규칙	예시
컴포넌트	모두 `q-`로 시작한다	`<q-btn>`, `<q-list>`, `<q-drawer>`
유틸리티 CSS 클래스	기존 CSS 개념 앞에 `q-`를 붙인 축약형	`q-pa-sm`: 사방(a)에 작은(sm) padding(p)
반응형	`breakpoint`(px)보다 화면이 좁아지면 모바일 모드로 바뀐다	Drawer의 `breakpoint` 속성

간격 클래스는 q-{p|m}{a|x|y|t|r|b|l}-{none|xs|sm|md|lg|xl} 형태다. q-mt-md는 위쪽 margin 중간 크기다.

레이아웃과 페이지

Quasar 앱은 레이아웃(헤더·사이드 메뉴 같은 틀)과 그 안에 바뀌어 들어가는 페이지로 나뉜다. Vue Router의 중첩 라우트(nested routes)를 그대로 쓴다.

<q-layout>                  ← src/layouts/MainLayout.vue
  ├─ <q-header>             ← 상단 바
  ├─ <q-drawer>             ← 햄버거 버튼으로 여닫는 사이드 메뉴(Layout Drawer)
  └─ <q-page-container>
       └─ <router-view />   ← 자식 라우트의 페이지가 들어가는 자리
            └─ <q-page>     ← src/pages/*.vue 의 최상위

<!-- src/layouts/MainLayout.vue -->
<template>
  <q-layout view="hHh lpR fFf">
    <q-header>...</q-header>
    <q-drawer v-model="drawerOpen" :breakpoint="767">...</q-drawer>
    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

// src/router/routes.js
const routes = [
  {
    path: '/',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      { path: '', component: () => import('pages/TodoPage.vue') },
      { path: 'settings', component: () => import('pages/SettingsPage.vue') },
    ],
  },
]

페이지 컴포넌트는 반드시 <q-page>로 감싸고, 레이아웃 안의 <q-page-container> 안에 들어가야 높이 계산이 맞는다.
페이지를 오갈 때 입력 중이던 상태를 유지하려면 <router-view>를 <keep-alive>로 감싼다(Vue 3에서는 <router-view v-slot="{ Component }"><keep-alive><component :is="Component" /></keep-alive></router-view> 형태).

자주 쓰는 컴포넌트

컴포넌트	용도	메모
`q-list` + `q-item`	목록과 항목	`q-item-section`으로 왼쪽 체크박스·아바타, 가운데 텍스트를 나눈다
`q-item clickable`	클릭 가능한 항목	`clickable`을 줘야 클릭 효과(ripple)와 이벤트가 붙는다
`q-drawer`	사이드 메뉴	`v-model`로 열림 상태 제어
`q-btn`, `q-input`, `q-checkbox`	기본 입력	`rules` 속성으로 간단한 검증 가능

플러그인으로 쓰는 기능

Dialog, Notify, Loading처럼 컴포넌트 밖에서 호출하는 기능은 플러그인이라 따로 등록해야 한다.

quasar.config.js의 framework.plugins에 추가한다.
```
framework: {
  plugins: ['Dialog', 'Notify'],
}
```

컴포넌트에서 useQuasar()로 꺼내 호출한다.

import { useQuasar } from 'quasar'
 
const $q = useQuasar()
function deleteTask(index) {
  $q.dialog({
    title: '삭제',
    message: '정말 삭제할까요?',
    cancel: true,
    persistent: true,
  }).onOk(() => tasks.value.splice(index, 1))
}

개발 환경 메모

린트: Quasar CLI(@quasar/app-vite)로 프로젝트를 만들 때 ESLint를 함께 고를 수 있다. 지금은 루트의 eslint.config.js(flat config)에 @eslint/js, eslint-plugin-vue, @quasar/app-vite/eslint, 선택적으로 @vue/eslint-config-prettier를 넣고, vite-plugin-checker로 개발 서버에서 검사한다. 과거에는 .eslintrc.js의 extends에 plugin:vue/vue3-essential 등을 넣었다. 원리는 ESLint와 Prettier 설정, 권장 에디터 설정은 Quasar 공식 문서의 VS Code 설정에 있다.
폼 검증: 간단한 검증은 q-input의 rules로 충분하다. 복잡한 폼은 Vue 3용 VeeValidate 4의 useField·useForm으로 값과 오류 메시지를 만들고 q-input의 v-model·error·error-message에 연결한다. 스키마는 Zod·Yup으로 정의할 수 있다.

정리

Quasar = Vue 3 위의 UI 컴포넌트 + 빌드 대상(SPA·SSR·모바일·데스크톱)까지 묶은 프레임워크.
컴포넌트는 q-, 간격 클래스는 q-{p|m}{방향}-{크기}.
화면 구조는 q-layout → q-page-container → router-view → q-page.
Dialog·Notify 같은 기능은 quasar.config.js에 플러그인으로 등록한 뒤 useQuasar()로 쓴다.

버그 제보