Get started with neutralino.js + Vue

In this short section, you will learn about how to set up a neutralino-vue project for development to build a cross-platform desktop app.

Prerequisites

1. Make sure you have already installed node and npm
2. Follow the latest documentation to install neutralino

Step 1: Set up a neutralino project

You can simply follow the documentation of neutralino to create a neutralino project. In this case, I create a neutralino project named my-first app.

neu create my-first-app

Once you’ve done it, you will find the source code with the minimal setup in the my-first-app folder.

Create a neutralino project

You can also give it a try to see if your neutralino project works by executing in the source code folder:

neu run

Run the neutralino app after creating the project

Step 2: Set up a Vue project inside the neutralino project

To do so in the current example, in the my-first-app folder, execute

npm init vue@latest

Follow the instructions to set up the Vue project based on your needs.

You can find more details in Vue’s documentation.

Create a Vue project via npm init

Now you have a Vue project inside the neutralino project. It is time to link them together.

Step 3: Configure how the Vue project builds

neutralino puts the content of the app in the resources/ folder. If you build the Vue app into this folder, neutralino will take the built Vue source as the content of the app. There are many ways of setting it up, here is how I dealt with it.

1. Set up Vite.

Configure Vite to write to the resources/ folder. Since the folder is one level up from the Vue project, I set it to ../resources/dist/. I also set emptyOutDir to true, so that the old source will be removed.

Configure Vite in vite.config.js

Build the Vue app, the final assembly can be found in neutralino’s resources/ folder

2. Tell neutralino the base URL of the app content.

As Vite wrote the final assembly to resources/dist/, in neutralino.config.json, you can simply tell neutralino where to look at by editing documentRoot to /resources/dist/.

Edit documentRoot in neutralino’s configuration file

Now, try to run the neutralino app again, and you will get:

Please note that you have to find a way to get neutralino.js loaded in your app content so that you can use the system functions.

Additional Resources

Here is a really nice template for neutralino + Vue (Vite) you can use. Everything is set there, you can simply follow the instructions and get everything running.