Laravel+vue+vuetify 설정하기

환경

• laravel
• vue
• vuetify

---

laravel 를 백엔드로 사용하고 vue 를 프론트로 사용하여 개발하던 도중 v-app-bar를 써야되는데 계속 찾을 수없다는 오류가 떠서 이것저것 찾아보면서 시간낭비를 하다가 드디어 추가하는 방법을 알았다ㅠㅠㅠ

 

1. Npm install vuetify

 

2. vuetify.js 만들기

 

app.js가 있는 디렉토리에 plugins 디렉토리를 만들고 vuetify.js 파일을 만들어준뒤, 다음과 같이 작성한다.

/resources/js/plugins/vuetify.js

import Vue from 'vue'

// import '@mdi/font/css/materialdesignicons.min.css'

import Vuetify, {
    VApp,
    VCard,
    VCardText,
    VCardTitle,
    VCardActions,
    VForm,
    VTextField,
    VTextarea,
    VBtn,
    VAppBar,
    VAppBarNavIcon,
    VContainer,
    VNavigationDrawer,
    VDivider,
    VList,
    VListItem,
    VListItemIcon,
    VListItemTitle,
    VListItemGroup,
    VIcon,
    VListItemAvatar,
    VImg,
    VListItemContent,
    VListItemSubtitle,
    VListItemAction,
    VToolbar,
    VToolbarTitle,
    VMenu,
    VSimpleTable,
    VPagination,
    VSelect,
    VSwitch,
    VProgressLinear,
    VFlex,
    VLayout,
    VCheckbox,
    VExpansionPanels,
    VExpansionPanel,
    VExpansionPanelHeader,
    VExpansionPanelContent,
    VDialog,
    VAlert,
    VRadio,
    VRadioGroup,
    VCombobox,
    VAutocomplete,
    VTabs,
    VTab,
    VTabItem,
    VTabsItems,
    VTabsSlider,
    VCol,
    VRow,
    VListGroup,
    VSnackbar
} from "vuetify/lib"

Vue.use(Vuetify, {
    components: {
        VApp,
        VDialog,
        VAlert,
        VListGroup,
        VCol,
        VRow,
        VTabs,
        VTab,
        VTabItem,
        VTabsItems,
        VTabsSlider,
        VRadio,
        VAutocomplete,
        VCombobox,
        VRadioGroup,
        VExpansionPanels,
        VExpansionPanel,
        VExpansionPanelHeader,
        VExpansionPanelContent,
        VLayout,
        VFlex,
        VCheckbox,
        VCard,
        VCardText,
        VCardTitle,
        VCardActions,
        VForm,
        VTextField,
        VTextarea,
        VBtn,
        VAppBar,
        VAppBarNavIcon,
        VContainer,
        VNavigationDrawer,
        VDivider,
        VList,
        VListItem,
        VListItemIcon,
        VListItemTitle,
        VListItemGroup,
        VIcon,
        VListItemAvatar,
        VImg,
        VListItemContent,
        VListItemSubtitle,
        VListItemAction,
        VToolbar,
        VToolbarTitle,
        VMenu,
        VSimpleTable,
        VPagination,
        VSelect,
        VSwitch,
        VProgressLinear,
        VSnackbar
    }
})

export default new Vuetify({
    icons: {
        iconfont: 'mdi'
    },
    theme: {
        dark: false,
    },
    themes: {
        light: {
            primary: "#ed4b3f",
            secondary: "#b0bec5",
            accent: "#8c9eff",
            error: "#b71c1c",
        },
    },
})

 

3. app.js에 추가

/resources/js/app.js

import vuetify from './plugins/vuetify'
.
.
.

const app = new Vue({
.
.
.
    vuetify,
.
.
.
});

 

이렇게 하면 드디어 vuetify에서 제공하는 모듈들을 사용할 수있다.