Vuetify 추가

[Supergrammer]

---

💣 이슈 (Issue) :

Vuetify 및 Vuetify 컴포넌트 추가

📋 업무 체크리스트 (Task Checklist) :

여기에 업무 체크리스트를 작성하세요.

• [x] Vuetify 추가
• [x] Vuetify submodule (icon 등) 추가

📜 상세 설명 (Description) :

Vue project 에 Vuetify 및 Vuetify 의 submodule 를 추가하는 작업

🔗 관련 이슈 (Related Issues) :

여기에 관련 이슈에 대해 기술하거나 링크를 첨부하세요.

📚 참고 (Reference) :

https://github.com/Supergrammer/JIB-SEE/issues/1

---

✏️ 처리 내용

해당 이슈 처리 후, 처리 내용에 대해 기술하는 부분입니다. 이슈 처리 후 작성해 주세요

Vuetify 추가

% npm i --save vuetify@^3.0.6

• plugins/vuetify.js

import { createVuetify } from "vuetify";

import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

import { fa } from "vuetify/iconsets/fa"

import "vuetify/styles";

const vuetify = createVuetify({
    components,
    directives,

    icons: {
        defaultSet: "fa",
        sets: { fa },
    }
});

export default vuetify;

• main.js

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "@/App.vue";
import router from "@/router";
import vuetify from "@/plugins/vuetify";

const app = createApp(App);
const pinia = createPinia();

app.use(router);
app.use(pinia);
app.use(vuetify);

app.mount("#app");

Vuetify Icons module 추가

# Material Design Icon 추가
% npm i --save @mdi/font

# Fontawesome Icon 추가
% npm i --save @fortawesome/fontawesome-free

• main.js

...
import "@mdi/font/css/materialdesignicons.css"
import "@fortawesome/fontawesome-free/css/all.css"
...

---

[Supergrammer]

No more Issue :)