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#