gtalarico/App.vue

## App.vue
<template>
  <div id="app">
      <navbar />
      <router-link to="/">Home</router-link>
    </div>
</template>

<script>
import Navbar from '@/components/Navbar.vue'
export default {
  name: 'app',
  components: {
    'navbar': Navbar
  }
}
</script>

## Home.vue
<template>
  <div class="home">
    Home Component
  </div>
</template>

<script>


export default {
  name: 'home',
  components: {

  }
}
</script>

## index.html
<!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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- Bulma -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
    <title>threejs-vue-template</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but threejs-vue-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

## main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

## Navbar.vue
<template>
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item"
       href="https://github.com/gtalarico/threejs-vue-template">
    <a class="navbar-item"
          href="/">
          <img src="@/assets/logo.png"
              width="25"
              height="25">
        </a>
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
        <a class="navbar-item is-size-6">
          Three.js Vue Template
        </a>
    </div>
  </div>
</nav>
</template>

<script>

export default {
  name: 'Navbar',
}
</script>

<style scoped>
.navbar {
  background-color: #fafafa;
  border: 1px solid #ddd;
}
</style>

## router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
  ]
})
	<template>
	<div id="app">
	<navbar />
	<router-link to="/">Home</router-link>
	</div>
	</template>

	<script>
	import Navbar from '@/components/Navbar.vue'
	export default {
	name: 'app',
	components: {
	'navbar': Navbar
	}
	}
	</script>
	<template>
	<div class="home">
	Home Component
	</div>
	</template>

	<script>


	export default {
	name: 'home',
	components: {

	}
	}
	</script>
	<!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">
	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<!-- Bulma -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" />
	<title>threejs-vue-template</title>
	</head>
	<body>
	<noscript>
	<strong>We're sorry but threejs-vue-template doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
	</noscript>
	<div id="app"></div>
	<!-- built files will be auto injected -->
	</body>
	</html>
	import Vue from 'vue'
	import App from './App.vue'
	import router from './router'

	Vue.config.productionTip = false

	new Vue({
	router,
	render: h => h(App)
	}).$mount('#app')
	<template>
	<nav class="navbar" role="navigation" aria-label="main navigation">
	<div class="navbar-brand">
	<a class="navbar-item"
	href="https://github.com/gtalarico/threejs-vue-template">
	<a class="navbar-item"
	href="/">
	<img src="@/assets/logo.png"
	width="25"
	height="25">
	</a>
	</a>
	</div>
	<div class="navbar-menu">
	<div class="navbar-start">
	<a class="navbar-item is-size-6">
	Three.js Vue Template
	</a>
	</div>
	</div>
	</nav>
	</template>

	<script>

	export default {
	name: 'Navbar',
	}
	</script>

	<style scoped>
	.navbar {
	background-color: #fafafa;
	border: 1px solid #ddd;
	}
	</style>
	import Vue from 'vue'
	import Router from 'vue-router'
	import Home from './views/Home.vue'

	Vue.use(Router)

	export default new Router({
	routes: [
	{
	path: '/',
	name: 'home',
	component: Home
	},
	]
	})