[Vuejs]-Loading a Vue file's content into a JavaScript variable for routing

by

0👍

✅

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.

Leave a comment