Navigating between LiveView and Hologram pages

This question was moved from another thread because I thought it deserved its own discussion:

Semi-related to this, I’m curious what would be idiomatic in an app that had both LiveView pages and Hologram pages. Would ~p be appropriate to use to go from Hologram to LV? And what would be idiomatic for LV to Hologram? :thinking:

1 Like

From LiveView → Hologram:

To generate the path for a specific Hologram page, you can use the Hologram.Router.Helpers functions. These are automatically imported in Hologram Component and Page modules, but you can also import them in your LiveView:

  • page_path/1 - e.g., page_path(MyPage)
  • page_path/2 - e.g., page_path(MyPage, a: 1, b: "xyz")

The second parameter in page_path/2 can be either a keyword list or a map.

These helpers are currently not documented because they’re mostly used internally, but they may be needed in a gradual migration scenario, so maybe it’s time to surface them more prominently in the docs.

From Hologram → LiveView:

Just use a regular <a> element with href pointing to the LiveView route.

If you’re worried about “zombie” link prevention (for when routes change and you forget to update them) and want to verify what you wrote is correct - which is what the ~p sigil gives you - you can use the ~p sigil on the server side, e.g., in init/3, and save it to the component/page state, then use it as a variable in the Hologram template.

Important note: In both cases, a full HTTP request will be needed to transition from one world to the other.

3 Likes