vue3 Composition API 에서 jQuery 사용하기

vue3 에서 jQuery 사용하는 방법을 알아보도록 하겠습니다.

jQuery 설치

npm install --save jquery

jQuery 설치 확인

보통 main.js 파일에 jQuery 를 import 해줍니다.

$ 한개 대신 $$ 두개를 사용하려고 합니다.

import { createApp } from 'vue'
import './style.css'
import App from './AppChart.vue'
import store from './store'
import AfterLoginClass from './js/class/AfterLogin'
import jQuery from 'jquery'
import mitt from 'mitt'
const emitter = mitt();
 
 
/*
createApp(App)
    .use(store)
    .use(mitt)
    .mount('#app')
*/
 
const coforwardUi = createApp(App);
 
coforwardUi.provide('emitter', emitter)
coforwardUi.use(store);
coforwardUi.use(AfterLoginClass);
coforwardUi.mount('#app');
 
global.$$ = jQuery;

그러나

Uncaught ReferenceError: $ is not defined 오류 발생

분명 main.js 에서 import 해주고 아래와 같은 방법으로도 해줬지만 계속 오류 발생

global.$ = jQuery;
window.$ = jQuery;

그래서

해당 component 에서 jQuery import 해줌

n-test.vue

<script setup>
 
import { 
    ref, 
    computed,
    onMounted,
    watch,
    inject,
} from 'vue';
import { useStore } from 'vuex';
import $ from 'jquery';
 
...
...
$('#h11').text('text')

 

최종 : 각 components 에 jqquery import 하는게 아니라 main.js 한번만 하는 방법

main.js

import { createApp } from 'vue'
import './style.css'
import App from './AppChart.vue'
import store from './store'
import common from './js/common'
//import AfterLoginClass from './js/class/AfterLogin'
import jQuery from 'jquery'
import mitt from 'mitt'
const emitter = mitt();
 
 
/*
createApp(App)
    .use(store)
    .use(mitt)
    .mount('#app')
*/
 
var coforwardUi = createApp(App);
 
coforwardUi.provide('emitter', emitter)
coforwardUi.use(store);
coforwardUi.use(jQuery);
coforwardUi.use(common);
//coforwardUi.use(AfterLoginClass);
 
 
//coforwardUi.config.globalProperties.$common = common;
//coforwardUi.provide('$common', common);
 
console.log('>>>> main.js');
console.log(coforwardUi.config);
 
window.coforwardUi = coforwardUi;
 
global.$ = jQuery;
window.$common = common;
 
 
 
coforwardUi.mount('#app');

이 .mount()메서드는 모든 앱 구성 및 자산 등록이 완료된 후에 항상 호출되어야 합니다. 

또한 자산 등록 방법과 달리 반환 값은 응용 프로그램 인스턴스가 아닌 루트 구성 요소 인스턴스라는 점에 유의하십시오.

https://vuejs.org/guide/essentials/application.html#the-root-component

Creating a Vue Application | Vue.js