Tag: vue 3
-
How to use Custom Dynamic Calendar in Vue 3
Use Vue.js Dynamic Calendar. Without Any npm Plugin And jQuery. Step 1: Components <template> <div class=”calendar-area”> <div class=”container”> <div class=”calendar-wrapper”> <header> <h3>Calendar</h3> <p class=”current-date”>{{ currentDate }}</p> <div class=”icons”> <span id=”prev” @click=”changeMonth(-1)”> <i class=”ri-arrow-left-s-line”></i> </span> <span id=”next” @click=”changeMonth(1)”> <i class=”ri-arrow-right-s-line”></i> </span> </div> </header> <div class=”calendar”> <ul class=”weeks”> <li>Sun</li> <li>Mon</li> <li>Tue</li> <li>Wed</li> <li>Thu</li> <li>Fri</li> <li>Sat</li> </ul>…
-
How To Use The Load More Items Button For Vue.js
Use Vue.js Load More Items Button. Without Any npm Plugin And jQuery. Step 1: Components <template> <div class=”container”> <div class=”row justify-content-center text-center”> <div class=”col-lg-4 col-md-6″ v-for=”(item, index) in items” :key=”index” > <h1>{{ item.title }}</h1> </div> <div class=”col-lg-12″> <button @click=”loadMore” class=”default-btn”> Load More </button> </div> </div> </div> </template> Step 2: Script <script> export default { data()…
-
How To Use Custom Filter In Vue.js
Use Vue.js Custom Filter. Without Any npm Plugin And Jquery. Step 1: Components <template> <div class=”filter-area pt-100 pb-75″> <div class=”container”> <ul class=”filter-menu”> <li class=”filter” :class=”{ active: itemFilterKey == ‘all’ }” v-on:click=”itemFilterKey = ‘all'” > All </li> <li class=”filter” :class=”{ active: itemFilterKey == ‘mobile’ }” v-on:click=”itemFilterKey = ‘mobile'” > Mobile App </li> <li class=”filter” :class=”{ active:…
-
How to Use Custom Currency Exchange Rate Form in VueJS With Exchange Rate API
Use Custom Currency Exchange Rate Form Vue.js and it’s easily customizable. also without any npm plugin and jquery. ExchangerateAPI Step 1: Components <template> <div class=”container pt-100″> <div class=”currency-form”> <h1 class=”mb-4″>Vue.js Currency Exchange Form</h1> <form @submit.prevent> <div class=”form-group”> <label>From</label> <div class=”p-relative”> <input class=”form-control” type=”number” name=”input-one” id=”input-one” v-model=”amountOne” @input=”fetchData()” /> <select class=”dropdown-toggle” name=”first-currency” id=”first-currency” v-model=”currency_one”> <option :value=”item.currency”…
-
How to add dynamic current year in Vue JS
Use Vue.js dynamic current year. without any npm plugin and jquery. Step 1: Components <template> <div class=”copyright-area”> <p>CopyRight – {{currentYear}}</p> </div> </template> Step 2: JS <script> export default { data() { return { currentYear: new Date().getFullYear(), }; }, } </script>
-
How To Use Custom Popup Video In Vue.Js
Use Vue.js custom popup feature in Vue JS and it’s easily customizable also, neither npm plugin nor jQuery. Step 1: Components <template> <div> <div class=”container”> <div class=”video-btn” v-on:click=”isPopupMethod(isPopup)” style=”cursor: pointer;” > <i class=”flaticon-play”></i> </div> </div> <div class=”popup-video” v-if=”isPopup” > <div class=”d-table”> <div class=”d-table-cell”> <div class=”container”> <div class=”popup-overlay-close” v-on:click=”isPopupMethod(isPopup)” > <div class=”popup-overlay-close-line”></div> <div class=”popup-overlay-close-line”></div> </div>…
-
How To Use Typewriter Animation In Vue.Js
Use Vue.js custom typewriter animation and it’s easily customizable also, without any npm plugin and without jquery. Step 1: Components <template> <div class=”typewrite-area”> <h3 class=”typewrite”> {{typeValue}}<span class=”cursor” :class=”{‘typing’: typeStatus}”> </span> </h3> </div> </template> Step 2: JS <script> export default { data: () => { return { typeValue: ”, typeStatus: false, typeArray: [‘Creative.’, ‘Digital.’, ‘Design.’, ‘Development.’,],…
-
How To Use Custom Preloader In Vue.Js
Use Vue.js custom Preloader and it’s easily customizable also, without any npm plugin and without jquery. Components 1: App.vue Inside the src / App.vue file, Add the following elements. <template> <div v-if=”isLoading” class=”preloader”> <div class=”d-table”> <div class=”d-table-cell”> <div class=”lds-spinner”> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </div>…
-
How To Use Custom Back To Top Button In Vue.js
Use Vue.js custom back to top button and it’s easily customizable also, without any npm plugin and without jquery. Step 1: Components <template> <div @click=”scrollToTop()” :class=”[‘back-to-top-btn’, {‘go-top’: isTop}]” > <i class=’ri-arrow-up-s-line’></i> </div> </template> Step 2: JS <script> export default { name: ‘BackToTop’, data (){ return { isTop: false } }, methods: { scrollToTop() { window.scrollTo(behavior:…
-
How To Use Custom Accordion For Vue 3?
Vue.js custom accordion and easily customizable. without any npm plugin and without jquery. Components 1: Slot.vue Create an Slot.vue file located in the src/components/Accordion folder, and add the following components of code to the file. <template> <ul class=”accordion”> <slot></slot> </ul> </template> <script> export default { name: ‘Accordion’, props: {}, data() { return { Accordion: {…