Tag: vuejs

What is a watcher in vuejs?

When building components in Vue, we often need to respond to changes in our props. A watcher — or watched prop — let’s us track a property on our component and run a function whenever it changes. For example, if the prop colour changes, we can decide to log something to the console: export default { name: ‘ColourChange’, props: [‘colour’], watch:… Continue reading What is a watcher in vuejs?

Streamlining Vue.js with CDN in HTML file

Vue.js is a powerful JavaScript framework that allows you to build dynamic and interactive user interfaces. One of the easiest ways to get started with Vue.js is by using it directly from a Content Delivery Network (CDN) through a simple script tag in your HTML file. CDN Setup To use Vue.js from a CDN, you… Continue reading Streamlining Vue.js with CDN in HTML file

Single page build option in Vue.JS

Install single page vite-plugin-sigle file, then import { defineConfig } from ‘vite’ import vue from ‘@vitejs/plugin-vue’ import { viteSingleFile } from “vite-plugin-singlefile”   // https://vitejs.dev/config/ export default defineConfig({   plugins: [vue(),     viteSingleFile()], }) https://www.npmjs.com/package/vite-plugin-singlefile

Routing issue in vue.js

Create web hash history ex: import { createRouter, createWebHistory, createWebHashHistory } from ‘vue-router’; import HomePage from ‘../views/HomePage.vue’; import AllItemFulfillment from ‘../views/AllIf.vue’; import IfDetailPage from ‘../views/IfDetail.vue’;   const router = createRouter({   history: createWebHashHistory(import.meta.env.BASE_URL),   routes: [   {     path: ‘/’,     name: ‘HomePage’,     component: HomePage,   },   {     path: ‘/IF-Listing’,    … Continue reading Routing issue in vue.js

Which command do I use to generate the build of a Vue app?

To generate a production-ready build of a Vue.js app, you typically use the following command: npm run build This assumes that you have npm (Node Package Manager) installed, and your project has a “build” script defined in the “scripts” section of your package.json file. The “build” script is configured to run the build process using… Continue reading Which command do I use to generate the build of a Vue app?

what is the difference between vue cli and vite?

Vue CLI: Purpose: Vue CLI is a full-fledged development tool aimed at simplifying Vue.js application development. It provides a standardized project structure and a set of default configurations for building, testing, and deploying Vue.js applications. Configuration: Vue CLI uses webpack as the default build tool, which is a powerful and widely adopted module bundler. It… Continue reading what is the difference between vue cli and vite?

Issues in fetching special characters in Next Js / React.

Sometimes situations can be risen in fetching special characters into the website when working with latest frontend technologies like react, Vue js , next js etc. It’s must that we have to deal with these issues. A library called “He” could be a better solution in this situation. The “He” library is typically used for… Continue reading Issues in fetching special characters in Next Js / React.

How to use Tailwind CSS in your Vue.js project

Install required dependencies and add config files To use Tailwind CSS, we need the framework itself, PostCSS, and Autoprefixer. The thing is that Vue.js uses an older PostCSS version (7) at the moment, so we have to install the compatible packages for Tailwind CSS which by default uses the latest 8 version. We can install them by… Continue reading How to use Tailwind CSS in your Vue.js project