Routing / Aliases / Redirects

Traditional Nuxt applications use the file system to define routes based on naming conventions to create dynamic routes.

Drupal already provides a powerful routing system with alias support and redirects that can be managed by the editors. Drupal also provides multilingual support through translations of aliases.

We wanted to use the power of Drupal's routing system and make it available in Nuxt. In the blökkli starterkit you can use all the routing features of Drupal in your frontend application. Additionally, you can create routers that only exists in the frontend.

Routing

Nuxt provides a feature called Cache-all Route. The Drupal Core Schema module provides a GraphQL query called route that can be used to fetch the route information. If no other frontend route matches, we send the path from the incoming requests to the GraphQL API of Drupal using the route query to fetch all the data for the given path.

GraphQL Schema

extend type Query {
  route(path: String!): Url
}

GraphQL Query

query route($path: String!) {
  ...routeQuery

  route(path: $path) {
    ... on EntityUrl {
      entity {
        ...nodePage
      }
    }
  }
}

Advantages

  • Leverage Drupal routing
  • Support for aliases and redirects based on redirect module
  • Multilanguage / multi domain support
  • Classic Nuxt routing still possible
  • Catch-all route is just as fallback

Aliases and redirects

As in traditional Drupal sites, the editor can create an alias for a node and multiple redirects per node using the redirect module. The GraphQL query route returns the alias and redirect information for a given path. The Nuxt application will act accordingly and redirect the user to the correct page.

You can use the [useDrupalRoute()](/frontend/composables#usedrupalroute) composable to get the node information for a given path.

pages/[...slug

<template>
  <NodePage v-if="node" v-bind="node" />
</template>

<script lang="ts" setup>
  import type { NodePageFragment } from '#graphql-operations'

  definePageMeta({
    name: 'drupal-route',
    path: '/:slug(.*)*',
  })

  const nuxtRoute = useRoute()

  // Get the data.
  const { data: query } = await useAsyncData(nuxtRoute.path, async () => {
    return await useGraphqlQuery('route', {
      path: nuxtRoute.path,
    }).then((v) => {
      return v.data
    })
  })

  // Handles redirects and metatags.
  const { entity: node } = await useDrupalRoute<NodePageFragment>(query.value)

  setBreadcrumbLinksFromRoute(query.value)
  setLanguageLinksFromRoute(query.value)
  await renderPageDependencies()
</script>
Table of Contents