Vuetify 시작하기

Vuetify는 Vue.js 전용 UI 프레임워크다. 웹페이지를 만들 때 필요한 웬만한 컴포넌트들이 이미 Vuetify에 준비돼 있어서 손쉽게 가져다 쓸 수 있다.

 

Vue.js에 설치

Vue.js 프로젝트에서는 'vuetify' 패키지를 설치하고 createVuetify() 함수로 vuetify 객체를 생성한다.

 

패키지 설치:

pnpm i vuetify

 

main.ts 파일에 객체 추가:

import { createApp } from "vue";
import App from "./App.vue";

// Vuetify 관련 import
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

// Vuetify 객체 생성
const vuetify = createVuetify({
  components,
  directives,
});

const app = createApp(App);
app.use(vuetify); // app에 추가
app.mount('#app');

 

위 예시처럼 컴포넌트와 디렉티브를 전부 import하면 tree-shaking이 되지 않으니, Vite 또는 Webpack 환경에 따라 각자의 plugin 패키지를 설치해 필요한 컴포넌트와 디렉티브만 사용하도록 설정하는 것도 가능하다.

 

Nuxt.js에 설치 (module)

Nuxt module로 Vuetify를 설치할 때의 세팅법이다.

pnpx nuxi@latest module add vuetify-nuxt-module

 

위 명령어로 모듈을 설치하면 'nuxt.config.ts' 파일에 Vuetify 모듈이 자동으로 추가된다:

export default defineNuxtConfig({
  modules: ["vuetify-nuxt-module"],
});

 

Nuxt.js에 설치 (plugin)

Nuxt 환경에서 plugin으로 Vuetify를 설치하는 방법도 정리해봤다.

 

패키지 설치:

pnpm i -D vuetify vite-plugin-vuetify
pnpm i @mdi/font

 

패키지 설치 후 'nuxt.config.ts' 파일에는 Vuetify plugin을 사용할 수 있도록 아래 코드를 추가해준다.

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
  build: {
    transpile: ['vuetify'],
  },
  modules: [
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        config.plugins.push(vuetify({ autoImport: true }))
      })
    },
    //...
  ],
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
});

 

이후 '/plugins' 폴더에 'vuetify.ts' 파일을 만들어준다. 이때, Nuxt의 서버 컴포넌트를 지원할 수 있도록 createVuetify() 함수 안에 'ssr'값을 'true'로 넣어준다.

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";
import { createVuetify } from "vuetify";

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    ssr: true,
  });
  app.vueApp.use(vuetify);
});

 

 

Vuetify를 설치했으면, 마지막으로 Vuetify의 컴포넌트를 사용할 수 있도록 'app.vue' 또는 최상단 레이아웃 .vue 파일에 <v-app> 컴포넌트로 모든 자식 컴포넌트들을 wrap해준다.

<!-- app.vue 파일 예시 -->
<template>
  <v-app>
    <NuxtPage />
  </v-app>
</template>

<!-- /layouts/default.vue 파일 예시 -->
<template>
  <v-app>
    <slot />
  </v-app>
</template>

 

Vuetify 역시 MUI처럼 익숙해지기만 하면 내가 원하는 모양새의 웹을 빠르게 구현할 수 있다.