I want to get the simplest version of a vuejs Hello World using individual files. I am setting up the project like so: create index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
create create ./src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount("#app")
create ./src/App.vue:
<template>
Hello World
</template>
Run npm init --yes in terminal followed by npm install vue@latest, so package.json:
{
"name": "vueintro",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"vue": "^3.2.31"
}
}
Going to http://localhost, I get a blank page with inspect/console giving the error: Uncaught TypeError: Error resolving module specifier “vue”. Relative module specifiers must start with “./”, “../” or “/”.. I have tried importing ../node_modules/vue and using importmap but they all just throw errors.
That won't work in the browser, since it expects a URL to a file to be able to import a module. You need to either use a bundler/build tool of some kind, I recommend https://vitejs.dev/
Alternatively you can use https://vuejs.org/guide/quick-start.html#without-build-tools , make sure to map to exact file vue.esm-browser.js not just vue