[Vue3] pulgins설정(app.component)

내가 만든 컴포넌트
매번 import해서 쓰기 귀찮을 때 요긴하게 쓰일 방법!

pulgins폴더 안에 global-components.js 파일

• pulgins폴더 안에 global-components.js파일을 만들어준다.
• 전역으로 등록하고 싶은 컴포넌트를 가져와서 아래와 같은 코드로 등록을 해준다!

import AppCard from '@/components/app/AppCard.vue'
import AppGrid from '@/components/app/AppGrid.vue'
import AppPagination from '@/components/app/AppPagination.vue'

export default {
  install(app) {
    app.component('AppCard', AppCard)
    app.component('AppGrid', AppGrid)
    app.component('AppPagination', AppPagination)
  }
}

main.js

• main.js로 와서 아래와 같이 사용하겠다고 선언해주면
• 컴포넌트를 여러곳에서 사용하고 싶을 때 import 하지 않고
• template에 바로 사용할 수 있다
• 짱 죠아...!!

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'
**import globalComponents from './plugins/global-components'**

const app = createApp(App)
**app.use(globalComponents )**
app.use(router)
app.mount('#app')

---

📌 unplugin-vue-components 라이브러리 사용하면 더 편함!

• 라이브러리 설치 및 사용 방법 아래 링크!
  https://www.npmjs.com/package/unplugin-vue-components

unplugin-vue-components 설치하고
vite.config.js 파일에서 아래와 같이 설정해준다.

import { fileURLToPath, URL } from 'node:url'
**import Components from 'unplugin-vue-components/vite'**

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(), 
    **Components({ dts: true })**
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

그리고 서버 끄고 다시 npm run dev 하면
파일구조에 components.d.ts라는 파일을 자동으로 생성해준다. ( 아래 코드같이 만들어줌 )
파일이 만들어지면 공통컴포넌트로 import 안해도 자유롭게 사용가능!!

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module 'vue' {
  export interface GlobalComponents {
    AppCard: typeof import('./src/components/app/AppCard.vue')['default']
    AppGrid: typeof import('./src/components/app/AppGrid.vue')['default']
    AppPagination: typeof import('./src/components/app/AppPagination.vue')['default']
    PostFilter: typeof import('./src/components/posts/PostFilter.vue')['default']
    PostForm: typeof import('./src/components/posts/PostForm.vue')['default']
    PostItem: typeof import('./src/components/posts/PostItem.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
  }
}

---

내 프로젝트에 써보고 괜찮으면 다른 프로젝트 할 때 라이브러리 추천해봐야겠다!
강의보고 따라치기만 하다가
블로그에 정리하면서 글 남겨놓으니 강의 내용이 머릿속에 더 많이 남아있는 느낌!!!!
시간이 좀 걸리더라도 블로그에 정리 잘 해놔야겠다!
나중에 내가 보기도 편하구!!
➕LEVELUP(1)