anonimusprogramus/app.js

## readme.txt
https://github.com/lukeed/sirv/issues/36

## app.js
// taken from https://router.vuejs.org/guide/#html
const Foo = {
	template: `<div>This is Foo</div>`
}
const Bar = {
	template: `<div>And this is Bar</div>`
}

// taken from https://jsfiddle.net/posva/22wgksa3/
const UserSettingsNav = {
	template: `
		<div class="us__nav">
			<router-link to="/settings/emails">emails</router-link>
			<br>
			<router-link to="/settings/profile">profile</router-link>
		</div>
	`
}

const UserSettings = {
	template: `
		<div class="us">
			<h2>User Settings</h2>
			<UserSettingsNav/>
			<router-view class ="us__content"/>
			<router-view name="helper" class="us__content us__content--helper"/>
		</div>
  `,
	components: { UserSettingsNav }
}

const UserEmailsSubscriptions = {
	template: `
		<div>
			<h3>Email Subscriptions</h3>
		</div>
  `
}

const UserProfile = {
	template: `
		<div>
			<h3>Edit your profile</h3>
		</div>
  `
}

const UserProfilePreview = {
	template: `
		<div>
			<h3>Preview of your profile</h3>
		</div>
  `
}

const router = new VueRouter({
	mode: 'history',
	routes: [
		{
			path: '/foo',
			component: Foo
		},
		{
			path: '/bar',
			component: Bar
		},
		{
			path: '/settings',
			// You could also have named views at tho top
			component: UserSettings,
			children: [
				{
					path: 'emails',
					component: UserEmailsSubscriptions
				},
				{
					path: 'profile',
					components: {
						default: UserProfile,
						helper: UserProfilePreview
					}
				}
			]
		}
	]
})

// commented
// router.push('/settings/emails')

new Vue({
	router,
	el: '#app'
})

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>vue router + sirv</title>
		<style>
			.us {
				display: grid;
				grid-template-columns: auto 1fr;
				grid-template-rows: auto;
				grid-template-areas:
					'header header'
					'nav content'
					'nav helper';
			}

			h2 {
				grid-area: header;
			}

			.us__nav {
				grid-area: nav;
				border: 1px dotted;
				margin-right: 0.75rem;
				padding: 0.3rem;
			}
			.us__content {
				grid-area: content;
			}
			.us__content--helper {
				grid-area: helper;
			}
		</style>
	</head>
	<body>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

		<div id="app">
			<h1>Hello App!</h1>
			<router-link to="/foo">Go to Foo</router-link> |
			<router-link to="/bar">Go to Bar</router-link> |
			<router-link to="/settings">Go to Settings</router-link>
			<router-view></router-view>
		</div>

		<script src="app.js"></script>
	</body>
</html>
	// taken from https://router.vuejs.org/guide/#html
	const Foo = {
	template: `<div>This is Foo</div>`
	}
	const Bar = {
	template: `<div>And this is Bar</div>`
	}

	// taken from https://jsfiddle.net/posva/22wgksa3/
	const UserSettingsNav = {
	template: `
	<div class="us__nav">
	<router-link to="/settings/emails">emails</router-link>
	<br>
	<router-link to="/settings/profile">profile</router-link>
	</div>
	`
	}

	const UserSettings = {
	template: `
	<div class="us">
	<h2>User Settings</h2>
	<UserSettingsNav/>
	<router-view class ="us__content"/>
	<router-view name="helper" class="us__content us__content--helper"/>
	</div>
	`,
	components: { UserSettingsNav }
	}

	const UserEmailsSubscriptions = {
	template: `
	<div>
	<h3>Email Subscriptions</h3>
	</div>
	`
	}

	const UserProfile = {
	template: `
	<div>
	<h3>Edit your profile</h3>
	</div>
	`
	}

	const UserProfilePreview = {
	template: `
	<div>
	<h3>Preview of your profile</h3>
	</div>
	`
	}

	const router = new VueRouter({
	mode: 'history',
	routes: [
	{
	path: '/foo',
	component: Foo
	},
	{
	path: '/bar',
	component: Bar
	},
	{
	path: '/settings',
	// You could also have named views at tho top
	component: UserSettings,
	children: [
	{
	path: 'emails',
	component: UserEmailsSubscriptions
	},
	{
	path: 'profile',
	components: {
	default: UserProfile,
	helper: UserProfilePreview
	}
	}
	]
	}
	]
	})

	// commented
	// router.push('/settings/emails')

	new Vue({
	router,
	el: '#app'
	})
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>vue router + sirv</title>
	<style>
	.us {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto;
	grid-template-areas:
	'header header'
	'nav content'
	'nav helper';
	}

	h2 {
	grid-area: header;
	}

	.us__nav {
	grid-area: nav;
	border: 1px dotted;
	margin-right: 0.75rem;
	padding: 0.3rem;
	}
	.us__content {
	grid-area: content;
	}
	.us__content--helper {
	grid-area: helper;
	}
	</style>
	</head>
	<body>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

	<div id="app">
	<h1>Hello App!</h1>
	<router-link to="/foo">Go to Foo</router-link> \|
	<router-link to="/bar">Go to Bar</router-link> \|
	<router-link to="/settings">Go to Settings</router-link>
	<router-view></router-view>
	</div>

	<script src="app.js"></script>
	</body>
	</html>