As a beginner in vuejs, I am currently following the steps below to create my vue js app on my local system:
Step:
npm init vue@latest
✔ Project name: … VueDemo ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit testing? … No / Yes ✔ Add Cypress for both Unit and End-to-End testing? … No / Yes ✔ Add ESLint for code quality? … No / Yes ✔ Add Prettier for code formatting? … No / Yes
Project is being created in ./VueDemo Done.
cd VueDemo npm install npm run dev
However, an error is being thrown in the console:
failed to load config from /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js error when starting dev server: Error: Cannot find module 'node:url' Require stack:
- /Users/ashok/MyStudy/Vue/VueDemo/vite.config.js
- /Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15) at Function.Module._load (internal/modules/cjs/loader.js:745:27) at Module.require (internal/modules/cjs/loader.js:961:19) at require (internal/modules/cjs/helpers.js:92:18) at Object. (/Users/ashok/MyStudy/Vue/VueDemo/vite.config.js:31:23) at Module._compile (internal/modules/cjs/loader.js:1072:14) at Object._require.extensions. [as .js] (file:///Users/ashok/MyStudy/Vue/VueDemo/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:63096:24) at Module.load (internal/modules/cjs/loader.js:937:32) at Function.Module._load (internal/modules/cjs/loader.js:778:12) at Module.require (internal/modules/cjs/loader.js:961:19)
Package.json file:
{
"name": "vuedemo",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
"vite": "^3.0.4"
}
}
vite.config.js:
import { fileURLToPath, URL } from 'node:URL
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})