Universal Links and Nuxt
I am currently a junior web developer at FightCamp and we are currently finishing up migrating our entire eCommerce site to Nuxt. This past week I was asked to check our deep links to our iOS app.
Lucky for me all the files and routes were setup already, but sadly the links were not working. Since I did not know much about deep links/Universal links I went straight to the documentation.
After some trouble shooting I came to the conclusion it must be the file placement. I had trouble finding resources for Nuxt applications and Universal Links. If you are too just scroll to the bottom of this article!
What is a Deep Link?
A deep link is a special url that redirects mobile device users to an installed app instead of a browser window. This basically sends the user to a specific in-app location which saves the user time and energy (aka a happy user 😊 ).
If you have the FightCamp app and are on an iOS device click this link https://joinfightcamp.com/workouts?id=353! What happens?! Well… if you have the app installed it will direct you to workout 353. If you don’t, it will open our website’s workout page. Pretty cool right?
You maybe asking what is a Universal Link and is it the same thing as deep links? A universal link is pretty much Apple’s version of a deep link. The functionality is the same as a deep link but the implementation is different.
How to setup Universal Links?
The documentation for iOS Universal links are pretty straightforward. There is some work to be done on both your iOS app and website. Since I only handled the web side I’m going to focus on that. To see more about registering your app read the documentation here.
First you need to configure your site to host the apple-app-site-association file(AASA). This file connects your website domain with your app. When creating the filename make sure NOT to append .json to the filename.
The AASA example below contains a JSON object with the app and URL paths that should be included.
Easy right? This is where I was like WHAT?! Everything in the application looks correct, why are the links not working? Well… location of this file is key. The documentation says it can either go at the root of your project or in a sub folder .well-known. So your path to your AASA file would look like either below
https://example.com/apple-app-site-association
https://example.com/.well-known/apple-app-site-associationNuxt
Now the above should work for a Nuxt application, right? I tried placing the AASA file in both places and was still not able to get the branch validator to pass (highly recommend using this when testing your app).
Why the static folder you ask? The folder is directly mapped to the server root and contains files that won’t be changed. All files in this folder will be automatically served by Nuxt and are available through the project root URL (which is what we need).
So if your file structure looks like this static/.well-known/apple-app-site-association your json file would be available via https://example.com/.well-known/apple-app-site-association.
That’s it! I hope this helped and below are some resources I used and mentioned throughout the article 🤓 .
