[VUE + TYPESCRIPT] global component 선언하기

VUE.JS 목록

 

컴포넌트 만들기

/src/component/base/BaseSnackbar.vue

<template>
  <div>
    snackbar
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class BaseSnackbar extends Vue {}
</script>

 

 

Global 콤포넌트 선언 

/src/externalModule.ts

import Vue from 'vue'
import BaseSnackbar from '@/components/base/BaseSnackbar.vue'

export function initGlobalComponents () {
  Vue.component('BaseSnackbar', BaseSnackbar)
}

 

 

/src/main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import { initGlobalComponents } from './externalModule'

Vue.config.productionTip = false
initGlobalComponents()

new Vue({
  router,
  store,
  vuetify,
  render: h => h(App)
}).$mount('#app')

 

 

사용하기

/src/views/HelloWorld.vue

<template>
  <div>
    <base-snackbar />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  
}

</script>

 

 

VUE.JS 목록