Use the power of Nuxt with Tauri

Today, I will show you how you can use Tauri with Nuxt. You can find the files for reference on GitHub. Do not create the project in a synced folder like OneDrive. Replace "tutorial" with your own app name. You may need to have the Visual Studio Build Tools 2019 installed (try installing it if you get a Tauri error).

Create Nuxt Project

To get started, create a blank Nuxt project by following these steps:

1. Open a terminal
2. Navigate to the parent folder where you want to create the project: cd "c:/path/to/parent/folder"
3. Run this command to initialize a new Nuxt project: pnpm dlx nuxi@latest init tutorial Select pnpm as the package manager
4. Change the current directory to the project folder: cd tutorial

Initialize Tauri

Next, you need to initialize Tauri in your project by following these steps:

1. Install the tauri CLI globaly pnpm i -g @tauri-apps/cli
2. Run this command to install Tauri: pnpm tauri init
3. Answer the prompts as follows:
   • What is your app name? › tutorial
   • What should the window title be? › Tutorial
   • Where are your web assets (HTML/CSS/JS) located, relative to the "/src-tauri/tauri.conf.json" file that will be created? › ../.output/public
   • What is the url of your dev server? › http://localhost:3000
   • What is your frontend dev command? › pnpm nuxt
   • What is your frontend build command? › pnpm generate
4. Run this command to install the Tauri API: pnpm add @tauri-apps/api @tauri-apps/cli
5. Optionally, you can also install Sass to use SCSS: pnpm add sass

Configure some settings

Now, you need to change some settings in your project by following these steps:

1. Open your project in Visual Studio Code or its fork Cursor: code -r . or cursor -r .
2. In package.json, add "nuxt": "nuxt dev" to "scripts"
3. In package.json, change "dev": "nuxt dev" to "dev": "tauri dev"
4. In src-tauri/tauri.conf.json change "identifier" in "bundle" in "tauri" to your own identifier like ".tutorial" or "com.yourwebsite"
5. Finally, run pnpm tauri dev (this will take some time)

Now it should look similar to this:

To actually build your app, run pnpm tauri build and open the .exe in src-tauri\target\release or install the app with the .msi in src-tauri\target\release\bundle\msi.

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

My next Nuxt/Tauri tutorials I will make (No order, comment what you would like next):

• Nuxt/Tauri Basics
• Nuxt/Tauri Advanced
• SCSS Basics
• Custom Titlebar with window controls
• Acrylic Window effect
• Implement Fluent Design Theme