I am trying to learn Vue in depth and so I started from the beginning of the documentation again and working through it back to front.
Here is my index.html file:
<!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>Learning Vue</title>
<script type="importmap">
{
"imports": {
"vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
}
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
and here is my index.js file:
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
and here is my App.vue file:
<template>
<button @click="increment">
{{ count }}
</button>
</template>
<script setup>
import { ref } from "vue";
const count = ref(0);
function increment() {
count.value++;
}
</script>
In Chrome (Version 102.0.5005.61 (Official Build) (64-bit)) I get the following error and nothing displaying on the page: Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.
I read that if the browser doesn't know what type it is it will respond with "application/octet-stream" but then if you specify the type of the script as module why doesn't the browser know what type it is?
I have really searched as to why I am getting this error but I cannot find an answer. I also looked at many examples and it doesn't seem like there is an error in my code.
Why am I getting this error please and how do I fix it?
Your web server is serving the file to the browser using an improper Content-Type HTTP header - it must be text/javascript but the server either sends application/octet-stream or does not set this HTTP header at all.
It's your web server which is to blame - not the browser and certainly not Vue. Firefox will give you simiar error.
importmap is suited for development and currently it doesn't have good support.
you can use services like nexuscode.online as development environment without need to worry about this kind of problems.
I figured it out and it's actually fairly obvious but I lack the experience to have seen this from the start.
If you do not use the Vue CLI you cannot name a file .vue because the browser doesn't know what a vue file is. You have to call it .js so for example this doesn't work:
<script type="module">
import { createApp } from "vue";
import app from "./app.vue";
createApp(app).mount("#app");
</script>
but this works fine
<script type="module">
import { createApp } from "vue";
import app from "./app.js";
createApp(app).mount("#app");
</script>
and so we learn everyday. I do feel however the documentation for vuejs.org can be improved and they can show better examples that are complete code and not just snippets. Beginners need that extra help.