Front End Layouts
Creating a Front End Layout for Admin Pages
A Common Parent Component#
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
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
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
Give this a try in the browser. You should see the following:
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: