Vuetify가 v2.x로 버전이 변경되면서 기존 버전을 사용하던 소스들에서 여러 가지 문제가 발생한다. 그 중에 실제로 작업을 진행한 것들을 정리하고 있다. 만일 이 정리외의 사항들까지 처리해야 하는 경우라면 Release and Migration guide 문서를 참고하면 된다.
이 문제는 Vutify v1.x 버전에서는 Stylus를 사용했지만 v2.x 버전 부터는 sass를 사용하기 때문에 소스 상에서 참고하던 stylus 파일이 존재하지 않고 sass-loader 들을 webpack이 필요로 하면서 발생하게 된다.
import해서 사용하는 소스 경로 변경
1...
2 import 'vuetify/src/stylus/app.styl';
3...위의 2번째 라인에서 사용한 stylus/* 소스들이 제거되었기 때문이므로 이를 아래와 같이 신규 제공되는 것으로 변경하면 된다.
1...
2 import 'vuetify/dist/vuetify.min.css';
3...Webpack에서 사용할 sass, sass-loader 설치
# stylus 제거
$ yarn remove stylus stylus-loader
# sass 설치
$ yarn add sass sass-loader이 문제는 Vuetify v1.x 버전의 vuetify 초기화 방식이 v2.x 버전에서는 제대로 초기화되지 않기 때문에 발생한다.
v1.x 버전에서는 아래와 같이 main.ts 파일과 /plugins/vuetify.ts 파일을 사용해서 초기화하고 Vue에 등록해서 사용한다.
1// ./plugins/vuetify.ts
2import Vue from 'vue';
3import Vuetify from 'vuetify/lib'; // vuetify import
4import 'vuetify/src/stylus/app.styl';
5
6Vue.use(Vuetify, { // Vue에 등록 (with options)
7 iconfont: 'md',
8});
9
10// main.ts
11import Vue from 'vue';
12
13import App from './App.vue';
14import './plugins/vuetify'; // Vuetify plugin import (이미 등록됨)
15import router from './router';
16import store from './store/index';
17
18Vue.config.productionTip = false;
19
20new Vue({
21 router,
22 store,
23 render: (h) => h(App),
24}).$mount('#app');v2.x 버전에서는 위와 같이 처리하면 컴파일등의 문제는 없지만 실행 시점에 초기화되지 않는 문제가 발생하므로 아래와 같이 초기화 방법을 변경해 주어야 한다.
1// ./plugins/vuetify.ts
2import Vue from 'vue';
3import 'vuetify/dist/vuetify.min.css';
4import Vuetify from 'vuetify/lib'; // Vuetify import
5
6import colors from 'vuetify/lib/util/colors';
7
8Vue.use(Vuetify); // Vue에 등록 (without options)
9
10export default new Vuetify({ // option을 지정한 Vuetify instance 생성해서 export
11 icons: {
12 iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
13 },
14 theme: {
15 dark: false,
16 },
17 themes: {
18 light: {
19 primary: '#4682b4',
20 secondary: '#b0bec5',
21 accent: '#8c9eff',
22 error: '#b71c1c',
23 },
24 dark: {
25 primary: colors.blue.lighten3,
26 },
27 },
28});
29
30// main.ts
31import Vue from 'vue';
32
33import App from './App.vue';
34import vuetify from './plugins/vuetify'; // vuetify plugin import
35import router from './router';
36import store from './store/index';
37
38Vue.config.productionTip = false;
39
40new Vue({
41 vuetify, // Vue Instance에 등록
42 router,
43 store,
44 render: (h) => h(App),
45}).$mount('#app');이 문제는 Vuetify v2.x 버전에서 기존의 app가 제거되고 <v-app-bar app>로 변경되었기 떄문에 발생한다.
1...
2 <v-toolbar app ...>
3 ...
4 </v-toolbar>
5...위의 2번째 라인에서 사용한 <v-toolbar app ...> 태그가 제거되었기 때문이므로 이를 아래와 같이 신규 제공되는 것으로 변경하면 된다.
1...
2 <v-app-bar app ...>
3 ...
4 </v-app-bar>
5...이 문제는 Vuetify v2.x 버전에서 기존의 <v-toolbar>가 제거되고 <v-app-bar app>로 변경되었기 떄문에 발생한다.
1...
2 <v-toolbar :clipped-left= ...>
3 ...
4 </v-toolbar>
5...위의 2번째 라인에서 사용한 <v-toolbar> 태그가 제거되었기 때문이므로 이를 아래와 같이 신규 제공되는 것으로 변경하면 된다.
1...
2 <v-app-bar :clipped-left= ...>
3 ...
4 </v-app-bar>
5...이 문제는 Vuetify v2.x 버전에서 <v-btn> 태그에 사용했던 flat 속성이 제거되고 text 속성을 사용하는 것으로 변경되었기 떄문에 발생한다.
1...
2<v-btn v-if="isAuthenticated === false" class="hidden-xs-only" to="/login" flat>Login</v-btn>
3...위의 2번째 라인에서 사용한 flat 속성이 제거되었기 때문이므로 이를 아래와 같이 신규 제공되는 것으로 변경하면 된다.
1...
2<v-btn v-if="isAuthenticated === false" class="hidden-xs-only" to="/login" text>Login</v-btn>
3...<v-btn> 태그에서 변경된 내용은 다음과 같다.
이 문제는 Vuetify v2.x 버전에서 <v-btn>, <v-autocomplete>, <v-alert>, ... 태그에 사용했던 outline 속성이 제거되고 outlined 속성을 사용하는 것으로 변경되었기 떄문에 발생한다.
1...
2<v-btn outline>Login</v-btn>
3...위의 2번째 라인에서 사용한 <v-btn outline> 속성의 이름이 변경되었기 때문이므로 이를 아래와 같이 신규 제공되는 것으로 변경하면 된다.
1...
2<v-btn outlined>Login</v-btn>
3...이 변경에 영향을 받는 태그들은 다음과 같다.