Sorry to bump this, but does anyone have any ideas?

Thanks

Hi Dan, I'm facing the exact same dilemma. Maybe we can team up and find a solution, please send me your contacts, [email protected]

/ H

Hi,

I made a rudimentary controller that inefficiently generates a list of content routes, returning them in an array like this:

[
  {
    path: "/",
    contentType: "home"
  },
  {
    path: "/blog",
    contentType: "blogArea"
  },
  {
    path: "/blog/:slug",
    contentType: "blogPost"
  }
]

I'll provide the source code for that below. It is only a rough experiment, so it's calling the ContentTypeService many times (ideally we want to cache the whole list of document type permissions in memory on app start and fetch from that), and it doesn't consider a few cases. It might be enough for you to start with, though.

I have been stopped dead in my tracks, as it turns out that Nuxt only lets you add routes at build time, meaning that these routes can't be updated as content changes in Umbraco. For example, if you renamed the blog to 'News' then Nuxt would not be able to visit the blog/news page until it was re-built.

Someone has left a comment on my GitHub issue showing a way to add routes at runtime, so I'll be giving that a try soon. https://github.com/nuxt/nuxt.js/issues/7437

Ideally I would like to keep any discourse about the issue public, so as to help anyone else that come across the same problem. It will also have a nice side effect of bumping the relevant forum thread and/or GitHub issue, which will hopefully bring more attention to the topic.

RouteController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using MyProject.Models;
using Umbraco.Core.Models;
using Umbraco.Core.Models.PublishedContent;
using Umbraco.Web.WebApi;

namespace MyProject.Controllers
{
  /// <summary>
  /// A controller for accessing the routes in Umbraco,
  /// so that they can be registered in Nuxt.
  /// </summary>
  public class RouteController : UmbracoApiController
  {
    #region Public

    #region Methods

    /// <summary>
    /// Compile a list of all the routes in Umbraco.
    /// </summary>
    /// <returns>A list of routes</returns>
    public IEnumerable<RouteSummary> GetRoutes()
    {
      List<RouteSummary> result = new List<RouteSummary>();

      try {
        IPublishedContent root = Umbraco.ContentAtRoot().FirstOrDefault();

        if ( root != null ) {
          result.AddRange( GetRoutesForContent( root ) );
        }
      }
      catch ( Exception ) {
        // todo: log this
      }

      return result;
    }

    #endregion

    #endregion

    #region Private

    #region Methods

    /// <summary>
    /// Get the routes for a given piece of content, including any descendants
    /// </summary>
    /// <param name="content">The content to get the routes for</param>
    /// <returns>The collection of routes</returns>
    private IEnumerable<RouteSummary> GetRoutesForContent( IPublishedContent content )
    {
      List<RouteSummary> result = new List<RouteSummary>();

      string documentTypeAlias = content.ContentType.Alias;
      string basePath = content.Url;

      List<string> allowedTypes = GetPermissions( documentTypeAlias );

      result.Add( new RouteSummary( basePath, documentTypeAlias ) );

      int allowedCount = allowedTypes?.Count ?? 0;
      if ( allowedCount == 1 ) {
        result.Add( new RouteSummary( $"{basePath}:slug", allowedTypes?.First() ) );

        // todo: edge case with recursive n-level of same type
        // todo: edge case with child having different permissions
      } else if ( allowedCount > 1 ) {
        foreach ( IPublishedContent child in content.Children ) {
          result.AddRange( GetRoutesForContent( child ) );
        }
      }

      // todo: redirects, aliases

      return result;
    }

    /// <summary>
    /// Get a list of allowed child document types for the given content
    /// </summary>
    /// <param name="documentTypeAlias">The document type to check permissions for</param>
    /// <returns>The list of allowed document types</returns>
    private List<string> GetPermissions( string documentTypeAlias )
    {
      // todo: refactor to cache this and reduce calls to ContentTypeService
      IContentType type = Services.ContentTypeService.Get( documentTypeAlias );
      List<string> allowed = type.AllowedContentTypes.Select( x => x.Alias ).ToList();

      return allowed;
    }

    #endregion

    #endregion
  }
}

RouteSummary.cs

namespace MyProject.Models
{
  /// <summary>
  /// A Model for collecting the basic information about
  /// an Umbraco route.
  /// </summary>
  public class RouteSummary
  {
    #region Public

    #region Constructors

    /// <summary>
    /// Construct a <see cref="RouteSummary"/>
    /// </summary>
    public RouteSummary( string path, string contentType )
    {
      Path = path;
      ContentType = contentType;
    }

    #endregion

    #region Properties

    /// <summary>
    /// The route path
    /// </summary>
    public string Path
    {
      get;
      set;
    }

    /// <summary>
    /// The type of content to load for this route
    /// </summary>
    public string ContentType
    {
      get;
      set;
    }

    #endregion

    #endregion
  }
}

Hi again Dan, Would you mind sharing the code snippet you used when you registered the initial routes in nuxt using your API call?

Did you make a request from the nuxt.config file?

Hi,

Please see below. I borrowed heavily from this repository: https://github.com/wearewondrous/nuxt-storyblok-router

Create a Nuxt Module with these three files, and then register the module in your nuxt.config.js

Please let me know if you manage to get further with it than I did.

Thanks

logger.js

import consola from 'consola'

export default consola.withScope('nuxt:umbraco-router')

utils.js

export function addTrailingSlash (str) {
  return str.replace(/\/?(\?|#|$)/, '/$1')
}

module.js

import axios from 'axios'
import { addTrailingSlash } from './utils'
import logger from './logger'

export default async function Module (moduleOptions) {
  const defaultOptions = {
    accessToken: '',
    contentTypeDir: 'pages',
    disabled: false,
    exclude: [],
    useFallback: false
  }

  const options = {
    ...defaultOptions,
    ...moduleOptions
  }

  if (options.disabled) {
    logger.warn('Module Disabled')
    return
  }

  const pages = []

  console.log('loading routes...')
  const response = await axios.get('http://localhost:44369/umbraco/api/route/getroutes')
  pages.push(...response.data)

  const filteredRoutes = pages.filter(Boolean)
  const nomalizedDir = addTrailingSlash(options.contentTypeDir)

  this.extendRoutes((routes) => {
    filteredRoutes.forEach((route) => {
      const component = `${nomalizedDir}${route.ContentType}`

      routes.push({
        // name: route.name,
        path: route.Path,
        chunkName: component,
        component
      })
    })

    console.log(routes)

    if (options.useFallback) {
      routes.push({
        name: 'Fallback',
        path: '*',
        component: `${nomalizedDir}fallback.vue`
      })
    }
  })

  // Disable parsing `pages/`
  this.nuxt.hook('build:before', () => {
    this.nuxt.options.build.createRoutes = () => {
      return []
    }
  })
}

Hi again Dan,

So i did some experimenting this weekend. Instead of generating a list of routes that we initialize on build I created a middleware that is called before the page is loaded, in the middleware i make a request using Axios to our API passing the requested url and get the page properties.

Then I store the data in the Vuex store so that i can access my page properties when the page is loaded. I also created a "shared content" that holds the menu items, general site settings etc.

Downside so far is that i'm not sure if your locked into only one .vue file, multiple would be nice because that would work more like a MVC pattern that we're used to.

// Herman

Was a while ago we discussed this, did you ever find a solution?

Hi Dan and Herman

Did any of you make any progress on this issue? Our team wants to start developing Umbraco solutions completely headless and need to pick a frontend framework. We decided to try prototyping some stuff in Vuejs/Nuxt, but were stopped by the exact issue you are describing here.

My best solution so far sounds like a simplistic version of what Cimplex is describing in their latest post - basically everything is rendered in the same "base"-component and every url is routed to that one component. It works ok-ish but does not feel like you are using Nuxt the way it is intended, which is a red flag for me.

@Jakob, please drop me an email so we can discuss this further: [email protected]

is working on a reply...