[VueJS] NuxtJS에 jQuery 적용하기

NuxtJS와 VuetifyJS로 프로젝트를 만들면서 jQuery기반 프로젝트에서 유용하게 사용했던 datatablese.js나 datepicker 등

많은 것들이 VuetifyJS에서 제공을 해줘서 jQuery를 사용하지 않고 프로젝트를 만들고자 했었다.

 

하지만,

사정이 있어 jQuery기반 프로젝트에서 사용했던 기능들을 하나하나 Vue로 기능을 구현하고 있었는데

그중 몇몇 기능은 Vue 기반 오픈 소스들 중에서도 유사한 게 없고, 

그럼 기존과 좀 다르게 하고자 했으나 꼭 구현을 해야 하는 상황이 몇 있었다.

비슷한 Vue 오픈 소스를 찾아서 해봤지만, 시간적 문제 때문에 포기해야 하는 상황이 왔었다.

 

결국은 jQuery를 사용하기로 했다...

 

---

1. 프로젝트 설치

설치는 https://minu0807.tistory.com/86

[VueJS] NuxtJS + VuetifyJS 프로젝트 설치 (Nuxt 설치)

이걸 토대로 프로젝트를 생성.

기존에 작업 중이던 프로젝트에 하다 다른 문제가 생길 수도 있을 것 같아서 잘 적용이 되는지 확인해볼 겸 새로 만들어서 적용해볼 생각...

2. jQuery 적용

구글링을 해보니 NuxtJS에 jQuery를 적용하는 방법은 좀 다양하게 있었는데

그중 제일 간편해 보이는 걸로 해봤다.

 

위 1번에서 프로젝트 생성 완료 후 static 디렉터리에 jquery.js 파일을 넣는다.

그리고 nuxt.config.js에 script를 추가

3. 확인

확인을 하기 위해 page디렉터리에 jquery.vue 파일을 만든 후

다음과 같이 소스를 작성했다.

<template>
  <v-layout column>
    <v-flex>
      <v-card>
        <v-card-title>jQUeryJS</v-card-title>
        <v-card-text>
          <v-row>
            <v-col cols="9">
              <v-text-field id="text"></v-text-field>
            </v-col>
            <v-col cols="3">
              <v-btn id="btn" @click="btn">Check</v-btn>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>

<script>
export default {
  methods: {
    btn() {
      console.log('btn!!');
      var text = $('#text').val();
      console.log(text);
    }
  }
}
</script>

<style>

</style>

jquery.vue

입력창에 텍스트를 입력 후 버튼을 누르면 jQuery 방식으로 입력창에 입력된 값을 불러온다.

 

버튼 눌렀을 때 결과

$('#idName).val(); 가 적용되는 걸 확인할 수 있다.

 

---

jQuery 기반 플러그인 slick.grid.js를 뷰로 구현하고자 했으나 slick.grid.js는 뷰 버전이 없었고

그나마 가장 유사했던 ag-grid-vue를 사용해봤지만, 유료 버전이 아니면 slick.grid.js에서 사용했던 주요 몇몇 기능을 구현할 수가 없었다.

다른 방법으로 구현을 해보고자 했으나, 시간적 문제와 아무리 생각해도 힘들 것 같다는 결론이 나왔다.

어쩔 수 없이 jQuery를 적용시키긴 했는데, 잘 적용될지는 해봐야 알 것 같다.

 

추가 내용.

가능하면 사용하지 않는걸 권장한다.

nuxt.config.js에 적용하다 보니 모든 페이지에 jQuery가 적용되는데

이게 생각보다 많은 자원을 먹는다.