chinchang
Vue app: Wrong Mime-Type of *.vue-files
Meta info
- Is this a bug or suggestion?: Suggestion
- Version (click on help icon in footer): 4.0.3
- Context - Web app, Chrome extension or both?: Web app
In the files-version of web-maker (beta) I try to write a simple multi file vue app. Unfortunately that is not possible.
When importing my App.vue file from script.js, I get this error in the chrome dev console and my app doesn't work:
Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. App.vue:1
It seems to be a problem with the html server configuration for .vue-files.
Suggestion: *.vue-files should not be served as MIME Type "text/html" but "application/javascript"
Here my code:
Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Vuetify app template</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles/style.css" />
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>
<script type="module" src="script.js"></script>
</body>
</html>
Script.js
import App from "./App.vue"
const app = new Vue({
vuetify: new Vuetify(),
data: {
message: 'World'
},
render: h => h(App)
}).$mount('#app')
App.vue:
<template>
<div id="app">
<v-app>
<v-content>
<v-container>Hello {{test}}</v-container>
</v-content>
</v-app>
</div>
</template>
<script>
export default {
name: "Vuetify App Template",
data() {
return {
test: "Hello"
}
},
}
</script>
I don't think even after setting the correct mime type the above code will work. That is because .vue files can't be directly understood by browsers. Something like vue-loader (for webpack) is required to convert .vue files to browser understandable code. And Web Maker files mode is a simple HTML/CSS/JavaScript environment without build processes like webpack.
If you want to use Vue, you'll have to run without .vue files. Check out the sample in templates.
