Loading a Vue file's content into a JavaScript variable for routing - import

Question

I've been trying to use the vue-router package for days without figuring out how it works, and it kind of drives me crazy.
My problem: I want to make a Single Page Application using VueJS, and I have taken the vue-router package since it is the routing package officially supported by the VueJS development team.
I've read a lot of "getting started" articles, lots of them start by hard-writing the template like this:
const Foo = { template: '<div>foo</div>' }
But since I'm not really into writing my entire template between those two quotes marks, I searched for a way to write my template into a file, and then load the file's content into a JS variable.
It seems that it's possible to write the templates into .vue files, and then load them into variables using:
import App from './App.vue';
But when I do this that way I get this error: "Unexpected token import".
I'm really frustrated by that, haven't they thought about a really convenient way for the template loading to be compatible on every browser? What did I miss?

Answer 1

I suggest you look into Vue CLI for helping you set up a desired scaffold for your project. Based on the options you choose you can end up with a webpack backed template along with the vue-router included. Webpack will take care of bundling your project so you don't encounter errors like that one.
Generally what you want to do is use vue files. A vue file is divided into three parts, and would look something like this:
<template>
// Your HTML for this component goes here
</template>
<script>
// Your JS for this component goes here
</script>
<style>
// Your CSS for this component goes here
</style>
Once you have your components organized like this, handling routing is pretty straightforward. You designate a file to contain the router object that handles the routing.
These are pretty much basics, so I won't go into details here but you can learn a lot more on the official Vue docs page. Here is also an example project that shows how to construct simple components in vue files and how to properly use the vue-router.