DEV Community

Cover image for Svelte Router SPA now supports route localisation
Jorge Alvarez
Jorge Alvarez

Posted on

Svelte Router SPA now supports route localisation

Today I've released version 5.2.0 of Svelte Router.

It's an easy to use routing library for Single Page Applications developed with Svelte JS.

The biggest feature in this version is support for route localisation.

Features

  • Define your routes in a single interface
  • Layouts global, per page or nested.
  • Nested routes.
  • Named params.
  • Localisation.
  • Guards to protect urls. Public and private urls.
  • Track pageviews in Google Analytics (optional).
  • Use standard About elements to navigate between pages (or use for bonus features).

This is an example of how to define routes:

routes = [
        {
          name: '/',
          component: PublicIndex
        },
        { name: 'login', component: Login, lang: { es: 'iniciar-sesion' } },
        { name: 'signup', component: SignUp, lang: { es: 'registrarse' } },
        {
          name: 'admin',
          layout: AdminLayout,
          lang: { es: 'administrador' },
          nestedRoutes: [
            {
              name: 'report',
              component: ReportsIndex,
              lang: { es: 'informes' }
            },
            {
              name: 'employees',
              component: EmployeesIndex,
              lang: { es: 'empleados' },
              nestedRoutes: [
                {
                  name: 'show/:id',
                  component: ShowEmployeeLayout,
                  lang: { es: 'mostrar/:id', it: 'mostrare/:id' },
                  nestedRoutes: [
                    {
                      name: 'index',
                      component: ShowEmployee
                    },
                    {
                      name: 'calendar/:month',
                      component: CalendarEmployee,
                      lang: { es: 'calendario/:month', de: 'kalender/:month' }
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
Enter fullscreen mode Exit fullscreen mode

What started as a small project has become now a full featured routing library for Svelte applications.

What's next in my TODO is refactoring some parts of the library to make the code easy to read and understand. It has a comprehensive suite of tests so it shouldn't be much of a problem.

If you use it in a project please send me your comments, suggestions and ideas here: https://github.com/jorgegorka/svelte-router/issues

Top comments (0)