diff --git a/package_template.json b/package_template.json
index 5505683..260dd72 100644
--- a/package_template.json
+++ b/package_template.json
@@ -19,7 +19,7 @@
   "devDependencies": {
     "npm-run-all": "^4.1.5",
     "sapper": "^0.24.2",
-    "svelte": "^2.0.0"
+    "svelte": "^3.0.0"
   },
   "merge-configs": {
     "rollup": {
diff --git a/src/routes/_error.html b/src/routes/_error.html
index fe39a85..320e587 100644
--- a/src/routes/_error.html
+++ b/src/routes/_error.html
@@ -1,14 +1,9 @@
-<svelte:head>
-	<title>{status}</title>
-</svelte:head>
+<script>
+	export let status;
+	export let error;
 
-<h1>{status}</h1>
-
-<p>{error.message}</p>
-
-{#if dev && error.stack}
-	<pre>{error.stack}</pre>
-{/if}
+	const dev = process.env.NODE_ENV === 'development';
+</script>
 
 <style>
 	h1, p {
@@ -32,10 +27,14 @@
 	}
 </style>
 
-<script>
-	export default {
-		helpers: {
-			dev: process.env.NODE_ENV === 'development'
-		}
-	};
-</script>
+<svelte:head>
+	<title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+	<pre>{error.stack}</pre>
+{/if}
diff --git a/src/routes/_layout.html b/src/routes/_layout.html
index efa6c15..1bb13af 100644
--- a/src/routes/_layout.html
+++ b/src/routes/_layout.html
@@ -1,8 +1,8 @@
-<Nav segment={child.segment}/>
+<script>
+	import Nav from '../components/Nav.html';
 
-<main>
-	<svelte:component this={child.component} {...child.props}/>
-</main>
+	export let child;
+</script>
 
 <style>
 	main {
@@ -15,10 +15,8 @@
 	}
 </style>
 
-<script>
-	export default {
-		components: {
-			Nav: '../components/Nav.html'
-		}
-	};
-</script>
\ No newline at end of file
+<Nav segment={child.segment}/>
+
+<main>
+	<svelte:component this={child.component} {...child.props}/>
+</main>
\ No newline at end of file
diff --git a/src/routes/blog/[slug].html b/src/routes/blog/[slug].html
index 27354be..368e02e 100644
--- a/src/routes/blog/[slug].html
+++ b/src/routes/blog/[slug].html
@@ -1,12 +1,21 @@
-<svelte:head>
-	<title>{post.title}</title>
-</svelte:head>
+<script context="module">
+	export async function preload({ params, query }) {
+		// the `slug` parameter is available because
+		// this file is called [slug].html
+		const res = await this.fetch(`blog/${params.slug}.json`);
+		const data = await res.json();
 
-<h1>{post.title}</h1>
+		if (res.status === 200) {
+			return { post: data };
+		} else {
+			this.error(res.status, data.message);
+		}
+	}
+</script>
 
-<div class='content'>
-	{@html post.html}
-</div>
+<script>
+	export let post;
+</script>
 
 <style>
 	/*
@@ -44,19 +53,12 @@
 	}
 </style>
 
-<script>
-	export default {
-		async preload({ params, query }) {
-			// the `slug` parameter is available because
-			// this file is called [slug].html
-			const res = await this.fetch(`blog/${params.slug}.json`);
-			const data = await res.json();
+<svelte:head>
+	<title>{post.title}</title>
+</svelte:head>
 
-			if (res.status === 200) {
-				return { post: data };
-			} else {
-				this.error(res.status, data.message);
-			}
-		}
-	};
-</script>
\ No newline at end of file
+<h1>{post.title}</h1>
+
+<div class='content'>
+	{@html post.html}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/index.html b/src/routes/blog/index.html
index f1c80ac..e24f711 100644
--- a/src/routes/blog/index.html
+++ b/src/routes/blog/index.html
@@ -1,3 +1,22 @@
+<script context="module">
+	export function preload({ params, query }) {
+		return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
+			return { posts };
+		});
+	}
+</script>
+
+<script>
+	export let posts;
+</script>
+
+<style>
+	ul {
+		margin: 0 0 1em 0;
+		line-height: 1.5;
+	}
+</style>
+
 <svelte:head>
 	<title>Blog</title>
 </svelte:head>
@@ -12,21 +31,4 @@
 				waiting for the 'click' event -->
 		<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
 	{/each}
-</ul>
-
-<style>
-	ul {
-		margin: 0 0 1em 0;
-		line-height: 1.5;
-	}
-</style>
-
-<script>
-	export default {
-		preload({ params, query }) {
-			return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
-				return { posts };
-			});
-		}
-	};
-</script>
\ No newline at end of file
+</ul>
\ No newline at end of file
diff --git a/src/routes/index.html b/src/routes/index.html
index d7ef047..3365406 100644
--- a/src/routes/index.html
+++ b/src/routes/index.html
@@ -1,16 +1,3 @@
-<svelte:head>
-	<title>Sapper project template</title>
-</svelte:head>
-
-<h1>Great success!</h1>
-
-<figure>
-	<img alt='Borat' src='great-success.png'>
-	<figcaption>HIGH FIVE!</figcaption>
-</figure>
-
-<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
-
 <style>
 	h1, figure, p {
 		text-align: center;
@@ -43,4 +30,17 @@
 			font-size: 4em;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
+
+<svelte:head>
+	<title>Sapper project template</title>
+</svelte:head>
+
+<h1>Great success!</h1>
+
+<figure>
+	<img alt='Borat' src='great-success.png'>
+	<figcaption>HIGH FIVE!</figcaption>
+</figure>
+
+<p><strong>Try editing this file (routes/index.html) to test live reloading.</strong></p>
\ No newline at end of file