user1432751 user1432751 - 1 year ago 103
Javascript Question

Using `.vue` files with latest browsers that support import/export

Chrome 60 and latest Firefox with flags have support

import/export
directives. I would like to use
.vue
files without NodeJS, but I can't figure out how to do it.

import/export
works fine with
.js
files, but when I am trying to do it with
.vue
I am getting fail.

My code:

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://unpkg.com/vue"></script>

<script type="module">
import {myc} from './c.vue';
</script>

</head>
<body>

</body>
</html>


for start I tried to place in
c.vue
next code:
export const myc = "ccc";


But I got error:
GET http://localhost:8082/c.vue
.

Is it's possible to place there content like:

<template>
<div id="app">
</div>
</template>

<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome!'
}
},
components: {}
}
</script>

Answer Source

As said in the comment, even modern browsers are unable to read .vue files, and that's very unlikely to change in the future. So you should should use some build tool to convert .vue to .js. For bundle solutions, see the other answers.

If for some reason you don't want to bundle them (the only serious reason I can see for it is for fun & test / pure electron release, actually, but anyway), I may have another solution.

I didn't tested it for your particular use case (native import/export in browser), but I wrote a module using vueify to convert .vue files into .js, without bundling them, using gulp. It should probably work.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download