Nuxt 3 as frontend for Tauri.

Kinjalk Tripathi — Sun, 21 Jan 2024 10:38:05 +0000

Nuxt is a microframework for Vue.js. It is basically a fullstack framework for javascript. It includes both frontend & the backend, however we will only use the frontend part.

One may be inclined to think that Nuxt might be an overkill, but it isn’t. Nuxt is much more than Vue. It’s provides a better frontend experience which compares to none. Vue, however, can be ideal for smaller application.

Tauri, on the other hand, is a toolkit for creating desktop application in Rust. The 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 first recommend watching this video by Simon Hyll. He shows how to setup the folder structure properly.

In case, you wanna skip the video, here’s the tree-view of the directory:

.
|-- src
|   |-- pages
|   `-- public
|-- src-tauri
|   |-- Cargo.lock
|   |-- Cargo.toml
|   |-- build.rs
|   |-- icons
|   |-- src
|   |-- target
|   `-- tauri.conf.json
|-- tsconfig.json
|-- yarn.lock
|-- README.md
|-- nuxt.config.ts
|-- package-lock.json
|-- package.json
|-- server
    `-- tsconfig.json

Once you have them setup, you can happily 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 files (which hardly takes 1 minute).

If you’ll run the build command without configuring the files, you’ll likely run into the above error.

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 routes. 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 only occurs when Tauri isn’t successful in finding the static build.

Nuxt, being a full-stack framework, by default renders the build files on demand via its node server instead of pre-rendering. 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.
Add the following code in nuxt.config.ts :

export default defineNuxtConfig({
    ssr: false
})

Now, we’ll simply tell Nuxt to prerender our site (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 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.