Front End Layouts
Creating a Front End Layout for Admin Pages
A Common Parent Component#
Layouts are a technique for creating a common parent component that can be reused across multiple child components. This can provide a standard look and feel, such as with a navigation bar. We can also use a layout as a place to run shared JavaScript initialization logic.
For our School Lunch application, we'll add a parent AdminLayout
that will set a shared user state. Then we'll use that shared user state to display information in its child Admin components.
Return back to routes.js
and add a new import for a file we'll create called AdminLayout.svelte
:
import AdminLayout from './views/admin/AdminLayout.svelte'
Then we need to change the route configuration to use nestedRoutes
. Instead of having a direct route of /admin/manage-menus
, we'll route through the AdminLayout
and use the name index
for the actual destination route.
In web application terminology, index refers to the "base route" and can be left off when using the route. For example, both http://localhost:5000/admin/manage-menus/index and http://localhost:5000/admin/manage-menus would now route to the LunchMenuAdmin
component, with the AdminLayout
layered on top.
Here's the updates to routes.js
:
const routes = [
{ name: '/', component: Home },
{ name: '/lunch-menu', component: LunchMenuView },
{
name: '/admin/manage-menus',
component: AdminLayout,
nestedRoutes: [
{ name: 'index', component: LunchMenuAdmin },
],
},
]
Now, we need to create the actual layout file so the front end will compile. Create an AdminLayout.svelte
file under src/views/admin/
. For the next step, we'll just use the admin layout as a pass-through to the destination route. Add the following to AdminLayout
:
<script>
import { Route } from 'svelte-router-spa'
export let currentRoute
</script>
<div>
Admin Layout
<Route {currentRoute} />
</div>
Give this a try in the browser. You should see the following:

Stores#
Svelte has a concept of Stores, which are objects that hold states that can be used by any Svelte component. Stores are a state management tool similar to Redux in React and Vuex in Vue. The new AdminLayout
file we just created is a good place to populate a user store for our School Lunch application.
Create a simple file called stores.js
in the src
directory of the frontend project. This file will export a writable user store:
import { writable } from 'svelte/store'
export const user = writable()
Svelte Lifecycle Functions#
This page is a preview of Fullstack Svelte