[Nuxt Admin] 2. Vuetify UI 테마 설정

in Devlog on Nuxt



[ Nuxt Admin Template 2 ] Nuxt + Vuetify Template 기반이기에 Vuetify로 UI를 쉽게 조정할 수 있다.


3. Vuetify UI 전체 테마 설정

Vuetify 에선 어플리케이션의 전체 테마를 설정이 가능하다. 기본 레이아웃의 default.vue에서 본인은 간단하게 전체테마 dark를 light로만 바꿔서 진행하겠습니다.

layout/default.vue

<v-app light>
...
</v-app>


Nuxt-Vuetify-UI-theme-s1

4. Vuetify UI 커스터마이징

Vuetify에서는 UI를 아래와 같이 쉽게 커스터마이징 할 수 있습니다.

plugins/vuetify.js

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

또한 예를 들어 아래와 같이 사용자 정의 테마 객체로 설정이 가능하다.

src/theme.js

import colors from 'vuetify/es5/util/colors'

export default {
  primary: {
    base: colors.purple.base,
    darken1: colors.purple.darken2
  },
  secondary: colors.indigo,
  tertiary: colors.pink.base
}

src/index.js

import Vue from 'vue'
import Vuetify from 'vuetify'
import theme from './theme'

Vue.use(Vuetify, { theme })

참고