In Phoenix in general and using VueJS on front-end in particular, how to map friendly URL's to content?

I mean how to map for instance /news/12 to /news/elixir-2-announced? Do I need to create a database table to map friendly URL’s to actual content? How is this achieved in pure Phoenix and how the same can be done using VueJS on the front-end? Are there any specialized libraries for this? Thank you.

it’s called a slug you might find what you need here: https://hex.pm/packages?_utf8=✓&search=slug&sort=recent_downloads

it would have to go in the db, and remember to set a canonical uri in the html. also support multiple slugs for one id - eg. if the title/name changes etc.

don’t know vuejs, but phoenix should add in some js or a variable in the html that let’s vuejs know what it is supposed to do…

1 Like

As @outlog mentioned usually it is by using slugs. If your pages are saved in the db, e.g., posts, then you can create a column on the post record (e.g. slug) and match /news/:slug, just as you would for ID’s, with an appropriate method for fetching the record through that column. There’s a bit of care to be taken in order to guarantee that a user can change an existing slug, and that it is reflected without breaking previously existing slugs - and that there are no slugs collisions when changing, and so forth (mostly for SEO).

For the VueJS bit it really depends on what you’re doing with it? Why do you want to render the page with vuejs? Are you using the router?

1 Like

Take a look at the Phoenix.Param protocol for the phoenix side of things.

1 Like

Going by Titled URL Slugs in Phoenix you have to strip the “slug-ified title” and only use the “url slug” with the repo. Given that mechanic you could generate the titled slugs in VueJS - if that is what you want to do.

But it does seem to make more a lot more sense to have the source of the URLs provide the slug-ified URLs to begin with.

1 Like

Also, make sure to put all slugs in the same table so that it’s easy to prevent conflicts.