Nuxt 2 + Vuetify 2 초기 설정
0. 환경
- nuxt 2.0.0
- vuetify 2.0.0
1. nuxt
https://ko.nuxtjs.org/guide/installation 한국어 버전 nuxt 공식 홈페이지에서 starter template를 다운받아서 사용했다.
영어 홈페이지에 들어가니 create-nuxt-app을 사용하라는 걸 보니까 그냥 다운받은게 문제인 것 같기도 하다.
2. vuetify
https://vuetifyjs.com/en/getting-started/quick-start 역시 공식 홈페이지를 따라했다.
첫 설치 시 dist/index.html이 없다는 오류가 발생했지만 무시.
컴파일 에러가 발생하지는 않지만 전혀 적용이 안된다.
3. nuxt-vuetify 설치
https://www.npmjs.com/package/@nuxtjs/vuetify 여기서 시키는대로 설치하면 적용은 된다.
4. custom theme
적용은 되는데 custom theme을 option에 넣어도 적용이 안됨.
https://stackoverflow.com/questions/56074338/nuxt-vuetify-how-to-apply-theme-colors/56076778 이 페이지를 참고해서 nuxt.config.js에 아래처럼 작성하면 적용된다.
modules: [
['@nuxtjs/vuetify']
],
vuetify:{
theme: {
themes: {
light: {
primary: "#5755d9", secondary: "#444291", accent: "#444291", error: "#f44336", warning: "#ffeb3b", info: "#2196f3", success: "#4caf50" } }
}
}
- nuxt 2.0.0
- vuetify 2.0.0
1. nuxt
https://ko.nuxtjs.org/guide/installation 한국어 버전 nuxt 공식 홈페이지에서 starter template를 다운받아서 사용했다.
영어 홈페이지에 들어가니 create-nuxt-app을 사용하라는 걸 보니까 그냥 다운받은게 문제인 것 같기도 하다.
2. vuetify
https://vuetifyjs.com/en/getting-started/quick-start 역시 공식 홈페이지를 따라했다.
첫 설치 시 dist/index.html이 없다는 오류가 발생했지만 무시.
컴파일 에러가 발생하지는 않지만 전혀 적용이 안된다.
3. nuxt-vuetify 설치
https://www.npmjs.com/package/@nuxtjs/vuetify 여기서 시키는대로 설치하면 적용은 된다.
4. custom theme
적용은 되는데 custom theme을 option에 넣어도 적용이 안됨.
https://stackoverflow.com/questions/56074338/nuxt-vuetify-how-to-apply-theme-colors/56076778 이 페이지를 참고해서 nuxt.config.js에 아래처럼 작성하면 적용된다.
modules: [
['@nuxtjs/vuetify']
],
vuetify:{
theme: {
themes: {
light: {
primary: "#5755d9", secondary: "#444291", accent: "#444291", error: "#f44336", warning: "#ffeb3b", info: "#2196f3", success: "#4caf50" } }
}
}