Neutralinojs + Vue3

https://github.com/ktkr3d/neutralinojs-vue
https://github.com/neutralinojs/neutralinojs
https://neutralino.js.org/docs/how-to/use-a-frontend-library/

Neutralinojs でVue3 を使ってみました。
React を導入する手順を参考にしてVue3 に置き換えてみました。
Windows 10 (x64)、Ubuntu 22.04 (x64)、Ubuntu 22.04 (arm64)で動作しました。

環境

  • Windows 10 Pro
  • node v16.13.1
  • npm 8.1.2
  • neutralinojs v4.6.0
  • vue 3.2.37

再利用するためのリポジトリと使い方

https://github.com/ktkr3d/neutralinojs-vue

npm install -g @neutralinojs/neu
git clone https://github.com/ktkr3d/neutralinojs-vue.git
cd neutralinojs-vue/vue-src
npm install
npm run build
cd ..
neu update
neu run

私が導入した手順

neu create myapp --template neutralinojs/neutralinojs-zero
cd myapp
npm init vue@latest
√ Project name: ... myapp-vue
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add Cypress for End-to-End testing? ... No / Yes
√ Add ESLint for code quality? ... No / Yes
√ Add Prettier for code formatting? ... No / Yes
cd myapp-vue
npm install
cd ..
# rm -rf www
rmdir www
neutralino.config.json
 {
   "applicationId": "js.neutralino.zero",
   "version": "1.0.0",
   "defaultMode": "window",
-  "documentRoot": "/www/",
+  "documentRoot": "/myapp-vue/dist/",
   "url": "/",
   "enableServer": true,
   "enableNativeAPI": true,
   "nativeAllowList": [
     "app.*"
   ],
   "modes": {
     "window": {
       "title": "myapp",
       "width": 800,
       "height": 500,
       "minWidth": 400,
       "minHeight": 200,
-      "icon": "/www/icon.png"
+      "icon": "/myapp-vue/public/favicon.ico"
     }
   },
   "cli": {
     "binaryName": "myapp",
-    "resourcesPath": "/www/",
+    "resourcesPath": "/myapp-vue/dist/",
     "extensionsPath": "/extensions/",
-    "clientLibrary": "/www/neutralino.js",
+    "clientLibrary": "/myapp-vue/public/neutralino.js",
     "binaryVersion": "4.6.0",
     "clientVersion": "3.5.0"
   }
 }
neu update
cd myapp-vue
npm run build
cd ..
neu run

サイドメニュー

Comments

2022-07-10
▲