Vue.js and jQuery?

Question

Is it possible to use jQuery with Vue.js? I have a function that I want to use in my Vue component. The function basically moves elements inside and out, but when I implemented the <script> tags, I got a list with all the elements instead of jQuery code.

 $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(0) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 5000); 

How to use this function in my code?

 <template> <div class="timer"> <div class="title-block"> <p class="title">MG de Jong</p> <p class="description">Sprint 1</p> </div> <div class="column"> <div class="block"> <p class="digit">{{ days | two_digits }}</p> <p class="text">Days</p> </div> <div class="block"> <p class="digit">{{ hours | two_digits }}</p> <p class="text">Hours</p> </div> <div class="block"> <p class="digit">{{ minutes | two_digits }}</p> <p class="text">Minutes</p> </div> </div> </div> </template> <script> export default { props: { date: { type: Number }, }, data() { return { now: Math.trunc((new Date()).getTime() / 1000) } }, mounted() { window.setInterval(() => { this.now = Math.trunc((new Date()).getTime() / 1000); },1000); }, computed: { seconds() { return (this.modifiedDate - this.now) % 60; }, minutes() { return Math.trunc((this.modifiedDate - this.now) / 60) % 60; }, hours() { return Math.trunc((this.modifiedDate - this.now) / 60 / 60) % 24; }, days() { return Math.trunc((this.modifiedDate - this.now) / 60 / 60 / 24); }, modifiedDate: function(){ return Math.trunc(Date.parse(this.date) / 1000) } }, } </script> 

Answer 1

You can do this, but in most cases you do not need to.

If you are learning Vue, try thinking in Vue and just let go of jQuery. In jQuery you do things for real; but now you have to think in a declarative way.
Do not manipulate the DOM yourself. All DOM manipulations must be handled by Vue, you just tell Vue what you want.

Vue provides Transition , your requirement can be met by this without jQuery. At first you might think that it’s not so easy and you want to solve it with jQuery, but as soon as you realize that you will fall in love with it.

Answer 2

As some of his comments mention, you can use the installed function. For more information, you can see this article: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

Here is a basic example of using cleave.js:

 <template> <input /> </template> <script> /* eslint-disable no-new */ import Cleave from 'cleave.js' export default { mounted () { new Cleave(this.$el, { date: true, datePattern: ['d', 'm', 'Y'] }) this.$el.oninput = (e) => { console.log('oninput the field', e.target.value) this.$emit('oninput', e.target.value) } } } </script> <style> </style> 

App.vue

 <template> <div id="app"> <smart-cleave @oninput="logIt"></smart-cleave> <div>{{date}}</div> </div> </template> <script> /* eslint-disable no-new */ import Cleave from 'cleave.js' import SmartCleave from './components/SmartCleave' new Cleave('#plain-input', { date: true, datePattern: ['d', 'm', 'Y'] }) export default { name: 'app', components: { SmartCleave }, data () { return { date: '' } }, methods: { logIt (val) { console.log('cahnged', val) this.date = val } } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* text-align: center; */ color: #2c3e50; margin-top: 60px; } </style>