Configuring UIkit for Better NuxtJS SSR Support
This video looks at a way in which we can fix the icon loading issue with NuxtJS Server-Side Rendering and the UIkit front-end framework.
NuxtJS by default does rendering on the server but UIkit uses JavaScript for its icons which loads on the client. With your NuxtJS application being set to SSR by default, the page will load on the server but the icons won't load until it reaches the client. Hence, the page content rendering before the icons.
Fixing the issue is as simple as setting the 'ssr' property in the 'nuxt.config.js' file to false.
However, if you do want an SSR NuxtJS app with UIkit. This is the best solution we've come up with so far.
Using UIkit & NuxtJS Without SSR:
• The Actual Fix To The NuxtJS + UIkit Icons...
Creating A UIkit-Update Script To Automate The Update Of UIkit In NuxtJS:
• Creating A UIkit-Update Script To Automate...
Official Website:
https://www.fedorae.com/edu
Written Tutorial:
https://edu.fedorae.com/configuring-u...
GitHub:
https://github.com/edu-fedorae
GitHub Repo:
https://github.com/fedorae-com/nuxt-u...
NuxtJS:
https://nuxtjs.org
UIkit:
https://getuikit.com
Social Media:
Twitter: / edu_fedorae
Instagram: / edu_fedorae
LinkedIn: / fedorae