[Vue] Vuetify 설치하기(feat. typescript)

기본적으로 웹 페이지에서는 CSS를 적용하여 스타일을 입힐 수 있다. 우리가 보는 세련된 페이지들도 궁극적으로는 CSS를 태그에 적용한 것이다.

Vue.js에서는 UI 프레임워크를 적용하여 이러한 CSS 적용에 대한 수고를 덜 수 있다.
(단, 2020년 12월 현재 기준으로 Vue 3.0 버전에 대하여는 아래 UI 프레임워크가 지원하지 않는다!!!)
여담으로, 필자가 typescript의 공식적인 적용을 위해 Vue 3.0으로 새 프로젝트를 시작하려 했다가, UI 프레임워크들이 지원하지 않아 2.6대로 회귀했다. 프론트엔드 경험이 많은 것도, 디자인에 자신이 있는 것도 아니기에..

UI 프레임워크

많이 쓰는 UI 프레임워크들은 아래와 같은 것들이 있다.
- BootstrapVue : bootstrap-vue.org/

BootstrapVue

아마 디자이너 없이 웹을 만든다면 비단 Vue 뿐이 아니라 여러 곳에서 쓰는 Bootstrap이다. github star가 12,600개에 이르고, 4.5 대의 부트스트랩 버전의 컴포넌트들을 지원한다.

- Vuetify : v2.vuetifyjs.com/ko/

Vue Material Design 컴포넌트 프레임워크 — Vuetify.js

필자가 요즘 많이 쓰는 vuetify이다. Vue.js만을 위한 컴포넌트 라이브러리이고, Material Design 규격을 최대한 이용해서 웹을 만들도록 지원하는 것을 지향한다. 업데이트도 지속적으로 이루어지고, 커뮤니티도 활발하고 github star가 28,900개로, 많이 각광받고 있다.

- Vue Material UI : vuematerial.io/

Vue Material - Material Design for Vue.js

Vue에 Material Design을 적용하기 위한 프레임워크로, github star가 약 9천 개 가량이다. 셋 중에는 필자가 유일하게 사용해보지는 않은 프레임워크이다.

셋 모두 지원하는 컴포넌트나 디자인들이 많고, 지속적인 업데이트가 이루어지고 있지만 본인은 가장 활발하고 많은 지원이 이루어진다고 본 Vuetify를 채택하여 프로젝트에서 활용하고 있다.

Vuetify 설치하기

공홈의 설치하기를 사실 보는 편이 가장 좋고, 잘 나와 있다. 아래에서는 본인의 경험을 덧붙여 좀 풀어서 쓰겠지만 대부분의 경우에는 공홈의 설치하기만으로도 충분히 설치할 수 있다. 다만, vue의 typescript 공식적인 지원이 3.0부터이다보니, vue+ts 조합을 사용하고 있을 경우 공홈의 설명이 부족할 수도 있다. 아래에 필자가 설치해본 경험으로 덧붙여 두었으니, 참고하시기 바란다.

v2.vuetifyjs.com/ko/getting-started/quick-start/

빠른 시작 — Vuetify.js

1. Vue Cli로 설치하기

요즘 Vue 프로젝트를 생성하는 경우에는 Vue-Cli(Vue 개발을 위한 시스템)를 많이 이용할 것이다. Vue 공홈에서 설치하기 항목에서 언급하고 있기에 공식 CLI라고 봐도 무방할 것이다.

여하튼 이런 경우에는 굉장히 간단하게 설치할 수 있다.

vue create my-vue-app
cd my-vue-app

vue add vuetify

만약 vue 앱이 아직 없다면 만들어주고, 그 폴더로 이동한다. 그리고 마지막 줄의 vuetify 추가만 입력하면 패키지 관리자(npm이나 yarn)을 통한 설치 및 vue 앱 적용까지 자동으로 이루어진다.
확인을 하고싶다면 2.WebPack으로 설치하기 중 파일 추가 부분이 자동으로 잘 이루어졌는지 확인하면 된다.

1-2. Vue Cli - Vue UI로 설치하기

Vue CLI 버전이 3.0 이상이라면 Vue UI를 사용할 수 있다. 현재 2.6.x의 지원 버전이 4.5.0 근처이니, 2020년 12월 현 시점에서 이 글을 읽는 분들은 대부분 지원하는 기능일 것이다. vue 앱이 만들어져있다는 가정 하에, vue ui라고만 입력하면 관리 창이 나온다. Plugins 탭에서 찾아 설치하면 된다.

2. WebPack으로 설치하기

webpack을 이용한 설치는 맨 위에서 설명한 vue add vuetify의 과정을 손수 한다고 생각하면 된다.

$ yarn add sass sass-loader fibers deepmerge -D
$ yarn add vuetify
// OR
$ npm install sass sass-loader fibers deepmerge -D
$ npm install vuetify

필요한 의존성들을 설치한 후에 vuetify를 설치하면 된다. 그리고 webpack.config.js 설정을 변경하고, 파일을 하나 만들고 main.js(혹은 main.ts)에서 vue 앱에 추가해주면 된다.

파일 추가

일반적인 js를 사용한다면 webpack.config.js에 아래 내용을 추가해주자.

// webpack.config.js

module.exports = {
  rules: [
    {
      test: /\.s(c|a)ss$/,
      use: [
        'vue-style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          // Requires sass-loader@^7.0.0
          options: {
            implementation: require('sass'),
            fiber: require('fibers'),
            indentedSyntax: true // optional
          },
          // Requires sass-loader@^8.0.0
          options: {
            implementation: require('sass'),
            sassOptions: {
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
          },
        },
      ],
    },
  ],
}

typscript를 사용한다면 webpack.config.js가 아니라 vue.config.js 파일이 있을 것이다. 아래와 같이 작성하자.

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],
  runtimeCompiler: true,
}

그리고 src/plugins/vuetify.js (혹은 vuetify.ts)를 생성해 주자.

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

마지막으로 main.js(혹은 main.ts)에서 연결해주면 된다.

// src/main.js

import Vue from 'vue'
import vuetify from '@/plugins/vuetify' // path to vuetify export

new Vue({
  vuetify,
}).$mount('#app')

덧붙여서, vuetify는 기본적으로 Roboto font와 mdi-font를 기본적으로 사용하는데, index.html에 폰트 CDN들을 추가하면 쉽게 사용할 수 있다. 본인은 커스텀 폰트와, 패키지 관리자에서 @mdi/js를 설치하여 적용하기 때문에 적용하여 사용하지는 않는다.

사용하려면 index.html에 아래를 추가해 주자.

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

3. Nuxt로 설치하기

Nuxt.js를 사용한다면, Nuxt Vuetify 모듈로 프로젝트에 추가할 수 있다.

$ yarn add @nuxtjs/vuetify -D
# OR
$ npm install @nuxtjs/vuetify -D

그 후에 nux.config.js 파일이 있을 것이다. 위 typescript에서의 설치와 비슷하게 buildModules에 추가해주면 된다.

// nuxt.config.js
{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}

결과 확인해보기

결과물을 간단하게 보고 싶으면, v-btn 등 간단한 컴포넌트를 만들어보아 확인해도 된다.

<v-btn class="success">Hello, Vuetify!</v-btn>

vuetify ui가 적용된 버튼이 보일 것이다.