Vue 컴포넌트를 Vanilla JS에서 사용하기

frontend/package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --target lib --name vue-components --dest dist ./src/entry.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@vue/web-component-wrapper": "^1.3.0",
    "ag-grid-community": "^31.2.1",
    "ag-grid-vue3": "^31.2.1",
    "axios": "^1.6.8",
    "core-js": "^3.8.3",
    "dotenv": "^16.4.5",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.7.1"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

frontend/src/App.vue

<template>
  <div id="app">
    <HelloWorld />
    <CustomerComponent />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

frontend/src/main.js (이게 꼭 필요한지 잘 모르겠음)

import { createApp } from 'vue';
import App from './App.vue';
import { HelloWorld, CustomerComponent } from './entry.js';

const app = createApp(App);
app.component('HelloWorld', HelloWorld);
app.component('CustomerComponent', CustomerComponent);
app.mount('#app');

frontend/src/entry.js

export { default as HelloWorld } from './components/HelloWorld.vue';
export { default as CustomerComponent } from './components/customers/CustomerComponent.vue';

 

 

Vue를 가져다 쓸 JavaScript

function link(url) {
    if (sessionCheck()) {
       switch (url) {
          case 'usage':
             $('#content').load('/views/usage.html');
             break;
          case 'bill':
             $('#content').load('/views/bill.html');
             break;
          case 'charge':
             $('#content').load('/views/charge.html');
             break;
          case 'reservation':
             $('#content').load('/views/reservation.html');
             break;
          case 'user':
             $('#content').load('/views/user.html');
             break;
          case 'account':
             $('#content').load('/views/account.html');
             break;
          case 'customer':
             initVueComponent('CustomerComponent', '#content');
             break;
          case 'service':
             $('#content').load('/views/service.html');
             break;
          case 'contract':
             $('#content').load('/views/contract.html');
             break;
          case 'resource':
             $('#content').load('/views/resource.html');
             break;
          case 'bill_hist':
             $('#content').load('/views/bill_hist.html');
             break;
          case 'bill_proc':
             $('#content').load('/views/bill_proc.html');
             break;
          case 'purchase':
             $('#content').load('/views/purchase.html');
             break;
          case 'statistics':
             $('#content').load('/views/statistics.html');
             break;
          case 'code':
             $('#content').load('/views/code.html');
             break;
          case 'menu':
             $('#content').load('/views/menu.html');
             break;
          case 'task':
             $('#content').load('/views/task.html');
             break;
          case 'dashboard':
             $('#content').load('/views/dashboard.html');
             break;
          case 'quicksight':
             $('#content').load('/views/quicksight.html');
             break;
          case 'quicksight_admin':
             $('#content').load('/views/quicksight-admin.html');
             break;
          default:
             $('#content').load('/views/usage.html');
       }
    } else {
       redirectUrl();
    }
}

function initVueComponent(componentName, mountSelector) {
	const mountPoint = document.querySelector(mountSelector)
	if (!mountPoint) {
		console.error('Mount point not found');
		return;
	}

	if (mountPoint.__vue_app__) {
		mountPoint.__vue_app__.unmount();
	}

	const app = Vue.createApp({
		render() {  // h 함수를 명시적으로 사용하지 않고 직접 컴포넌트를 반환합니다.
			return Vue.h(VueComponents[componentName]);
		}
	});

	app.component(componentName, VueComponents[componentName]);
	app.mount(mountPoint);
	mountPoint.__vue_app__ = app; // 마운트된 애플리케이션에 대한 참조를 저장
}