Combining Flask with Nuxtjs for SSR

If you want to generate your Nuxt app to a static website you must change this in your nuxt.config.js file:

{  target: 'static'}

By default Nuxt generates all files into /dist folder, and when you set the static mode, dist folder looks like:

/dist  /_nuxt       --- Core functionality: JS and CSS files go here  /images      --- All images stored into /static/images folder  /your-page-1 --- Contains one HTML file (If /pages/your-page-1.vue exists)  index.html   --- Your main html file  404.html     --- Default error page for 404

404 page is not generated by default, so if you want to generate it, you must set this config into nuxt.config.js file:

{  generate: {    fallback: true  }}

If you need to rename generated files, add this config to nuxt.config.js file:

{  build: {    filenames: {      app: () => '[name].js',      chunk: () => '[name].js',      css: () => '[name].css',      img: () => '[path][name].[ext]',      font: () => '[path][name].[ext]',      video: () => '[path][name].[ext]'    }  }}

User thebyteland's answer will work if you'd like to simply integrate a static Nuxt website with a Flask API. However, since the title specifically asked about creating a Nuxt.js SSR with a Flask API backend, this is how you would go about doing it.

In your root project directory, create a client and server folder. The client will be your dynamic SSR Nuxt app, this can be anything. In the nuxt.config.js file, however, you must specify that API calls are being made to the Flask server as so (axios):

  axios: {    HOST: "127.0.0.1",    PORT: "5000",    https: false,    debug: true, // only on development  }

This can be done equally with the Nuxt HTTP module, see their docs.

As long as your Flask server is running on the matching HOST and PORT, the SSR app will be able to make calls to it.

For a minimum example of Nuxt SSR + Flask API you can check this GitHub repo from the makers of Vue.js 3 Cookbook.