Issue with nuxtJs, vuetify and azure

Question

I deployed a static web app, made in nuxtJs with vuetify. All is working very well locally but once deployed, I cant see all component done with vuetify.

I follow those instructions : https://nuxtjs.org/deployments/azure-static-web-apps/

Thank you.

Answer 1

To deploy your nuxt.js app you need to follow the below workaround :

Please make sure that you have add the following in your package.json

"scripts": {
      "dev": "nuxt dev",
      "build": "nuxt generate"
    },

• If the website does note immediately load, then the background GitHub Actions workflow is still running. Once the workflow is complete you can then click refresh the browser to view your web app.

To check the status you can navigate as shown below or you can use this https://github.com/<YOUR_GITHUB_USERNAME>/repository name/actions

For more information please refer the below links:

• Microsoft Documentation : Deploy server-rendered Nuxt.js websites on Azure Static Web Apps
• SO THREAD : Azure static web apps not loading page resources correctly. css or javascript files

Answer 2

From the sample, you may be using routes.json - note that, the functionality defined in the routes.json file is now deprecated and better implemented in the Azure Static Web Apps configuration file. Kindly see these docs for sample configuration and see if that helps.

https://learn.microsoft.com/azure/static-web-apps/configuration#routes

https://github.com/Azure/static-web-apps/wiki/routes.json-reference-(deprecated)

To benefit the community, added our discussions from Q&A forum.