Nuxt3에서 Quasar 사용하기

Quasar는 Vue.js기반의 UI Framework이다. Quasar는 매우 다양한 Components가 있으며, 문서화도 아주 잘 되어있다. Quasar를 사용하게 된 이유와 Nuxt를 기반으로 프로젝트를 만들고 Quasar를 적용하는 방법을 설명하다.

 

 

Quasar

Quasar는 오픈소스 Vue.js 기반의 프레임워크이다. 우리나라에서는 Vue보다는 React의 점유율이 높기 때문에 아마도 Vue기반의 Quasar를 사용하는 케이스가 많지 않을 것이다. 만약 Vue를 사용한다면 Vuetify, BootstrapVue 등 다양한 UI 프레임워크가 있지만, Quasar는 그에 비해 지명도가 약간 떨어지는 느낌이다. 나도 그전에는 거의 못들어봤고 주로 Vuetify를 사용해왔기 때문이다.

Quasar

 

하지만 Quasar에는 웹개발에 필요한 다양한 UI 컴포넌트들이 존재하며, 특히나 문서화와 설명이 너무 잘되어있다. 그리고 보통 Vuetify와 같은 대부분의 UI 프레임워크에 Splitter 기능이 기본적으로 포함되어 있는 것을 본적이 없다. 그런데 Quasar에는 Splitter가 포함되어 있다. 내가 Quasar를 사용하게 된 2가지 이유가 바로 Splitter 컴포넌트와 문서화의 완성도이다.

 

 

Splitter

Splitter 영역을 구분하고 경계를 사용자가 드래그해서 이동시킬 수 있는 컴포넌트이다. 이 기능을 기본적으로 제공해주는 UI Framework를 본적이 없었는데, Quasar에 있는 것을 보고 환호성을 질렀다. 여러가지 장점이 있지만, 그중에서도 개인적으로 Splitter 컴포넌트가 Quasar를 선택하는데 결정적인 역할을 하였다고 해도 과언이 아니다.

 

See the Pen QSplitter: Basic - Quasar v2.12.0 by JH (@JH-the-reactor) on CodePen.

물론 Splitter외에도 필요한 대부분의 컴포넌트들이 존재한다. 다른 라이브러리에 있는 웬만한 컴포넌트들이라면 당연히 Quasar에도 모두 있다고 보면 된다.

 

 

문서화

Quasar 공식사이트에 문서가 굉장히 잘 정리되어 있다. Vuetify를 사용하면서 불만이었던 점 하나가 문서에 설명이 잘 안되어있는 요소들이 꽤 있다는 것이었다. 마치 문서를 만들다가 중간에 몇개 그냥 설명안하고 넘어간 느낌이랄까?

하지만 Quasar는 세부적인 속성에 관해서 빠뜨리는거 없이 설명이 잘 되어있다. 문서화는 해당 제품을 사용하는데 굉장히 중요한 역할을 하는데, 이점에서는 굉장히 만족한다. 단 한글 버전이 없어서 영문버전으로 봐야한다는 단점이 있지만 개발자라면 영문 오리지널 버전이 더  직관적으로 이해하기 쉬울 수 있다. 영문 문서에도 설명을 어렵게 하지 않고 일반적으로 쓰이는 용어를 가지고 간단하고 쉽게 설명한다.

 

 

---

아래에는 Nuxt3 프로젝트에 Quasar를 통합하는 방법을 설명한다.

Nuxt 프로젝트 생성부터 Quasar 모듈 설치, Nuxt 설정까지 3단계를 거치면 된다. 각 단계별로 차근차근 설명한다.

 

 

1. Nuxt 프로젝트 생성

먼저 Nuxt프로젝트를 생성해야 한다. 프로젝트명은 NuxtQuasar이라고 하자. 

$ npx nuxi init <프로젝트명>

아래 링크의 Nuxt3 설치 공식문서를 보면 잘 나와있다.

 

Nuxt - Installation 공식문서 바로가기

 

 

2. Quasar 모듈 설치

먼저 quasar 모듈을 설치한다.

그리고 nuxt-quasar-ui 라는 nuxt에 quasar 통합을 위한 모듈이 존재하므로 이것을 설치하여 준다.

$ npm install quasar @quasar/extras

$ npm install --save-dev nuxt-quasar-ui

보통 외부 모듈들을 Nuxt에 통합하려면 nuxt-quasar-ui와 같은 Nuxt 지원 모듈이 없으면 어려운데, Nuxt 커뮤니티에서 개발해서 지원을 해주고 있어서 굉장히 사용이 편리하다.

 

아래 링크에 해당 모듈 페이지로 갈 수 있다.

 

Nuxt Quasar Module 바로가기

 

 

3. Nuxt 설정

여기까지 했으면 필요한 모듈의 설치는 끝났고 이제 설정파일만 수정해주면 된다.

아래와 같이 Nuxt 설정에 modules을 추가하여 주고, quasar의 세부적인 설정을 해주면 된다.

quasar 세부 설정 내역은 Nuxt Quasar Module을 보면 설명이 잘 되어 있다. 

 

 

nuxt.config.ts

export default defineNuxtConfig({

  modules: ["nuxt-quasar-ui"],
  
  quasar: {
    plugins: [],
    sassVariables: 'css/quasar.variables.scss',
    quietSassWarnings: true,
    lang: 'en-US',
    iconSet: 'material-icons',
    config: {},
    extras: {
      font: null,
      fontIcons: ['material-icons', 'fontawesome-v6', 'mdi-v7'],
      svgIcons: [],
      animations: []
    }
  },
  
  ...
}

 

여기까지 했으면 Nuxt에서 Quasar 를 사용할 준비가 다 되었다. 이제부터 Quasar 컴포넌트를 사용해서 개발하면 된다.

 

Vue 개발자이고 괜찮은 UI 프레임워크를 찾는중이라면 Quasar를 적극 추천한다.