Nuxt 3 integration in Tauri

Nuxt and Tauri

Nuxt is a microframework for Vue.js.
It is basically a fullstack framework for javascript, however, we will only use for client-side, as it provides a much smoother experience than Vue.

Tauri, on the other hand, is a toolkit for creating desktop application in Rust. Its concept is similiar to Electron however Tauri requires lesser storage and memory (making it superior in some people’s book 👀).

DEVELOPMENT

To setup both of these in harmony, I would recommend watching the below video by Simon Hyll.
He shows how to setup the folder structure.

here’s the tree-view of the directory:

.
|-- src
|   |-- assets
|   |-- components
|   |-- public
|   |-- layouts
|   |-- composables
|   |-- middleware
|   |-- pages
|   `-- app.vue
|-- src-tauri
|   |-- src
|   |-- build.rs
|   |-- Cargo.lock
|   |-- Cargo.toml
|   `-- tauri.conf.json
|-- tsconfig.json
|-- nuxt.config.ts
|-- package.json
|-- yarn.lock
`-- README.md

Once you have them setup, you can start developing your application.

PRODUCTION

After you’re done with your developmental build and want to create a binary for your application, you will need to run the build command.

But before that, you must configure a few things; otherwise you will run into the below error:

Top wtf moments when developing Tauri apps with Nuxt

Explanation

Usually, popular frontend frameworks like React and Vue, create a dedicated folder (i.e dist folder) where they keep the static build of the frontend by pre-rendering the code. These files are then served by the server and rendered by the browser. Since Tauri uses browser rendering engine to manifest the frontend therefore it naturally requires the static build. Hence, the above error occurs only when Tauri isn’t successful in finding the static build.

Nuxt, being a full-stack framework, is configured to by default render via its backend node server. This creates a conflict as Tauri requires static build files in advance to manifest the frontend of your application.

Solution

Since we’re already using Rust for the backend therefore we’ll disable the server-side rendering for Nuxt. In nuxt.config.ts add the following code:

export default defineNuxtConfig({
    ssr: false
})

Now, we’ll simply tell Nuxt to pre-render our routes (meaning, create static files instead of relying on the server to run and process them during runtime).
We do this by adding the following code to our nuxt.config.ts:

routeRules: {
    '/': { prerender: true }
    /* do the same for all routes used */
},

Lastly, we need to specify the path to our static files folder.
In tauri.conf.json, point to the public folder located in the .output folder.

"build": {
    "distDir": "../.output/public"    
  },

Completed

Cool! So now you can run the build command.

yarn run tauri build

If you aren’t using yarn then you can refer to other build commands here.

Closing Remark

To refer an actual project in the process, you can check out my github repo— AI Therapist application.