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.
- Make sure you have already installed node and npm
- 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.
You can also give it a try to see if your neutralino project works by executing in the source code folder:
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.
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.
- 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.
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/.
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.
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.