DEV Community

loading...
Cover image for Svelte Router SPA now supports route localisation

Svelte Router SPA now supports route localisation

Jorge Alvarez
I develop websites, sometimes they even work.
・1 min read

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

Discussion (0)