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: https://www.youtube.com/watch?v=-D2T2bHlfcQ

Creating A UIkit-Update Script To Automate The Update Of UIkit In NuxtJS: https://youtu.be/8pfwsVOTyDo

Official Website: https://www.fedorae.com/edu

Written Tutorial: https://edu.fedorae.com/configuring-uikit-for-better-nuxtjs-support

GitHub: https://github.com/edu-fedorae

GitHub Repo: https://github.com/fedorae-com/nuxt-uikit

NuxtJS: https://nuxtjs.org

UIkit: https://getuikit.com

Social Media: Twitter: https://twitter.com/edu_fedorae Instagram: https://instagram.com/edu_fedorae LinkedIn: https://linkedin.com/company/fedorae ... https://www.youtube.com/watch?v=E8rrF6pKgXk