#Electron #Nuxt #TypeScript #ElementUI #SQLite
## バージョン
```json
"dependencies": {
"core-js": "^3.15.1",
"element-ui": "^2.15.2",
"nuxt-edge": "latest"
},
"devDependencies": {
"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27545203.75e046f",
"@nuxt/types": "^2.15.7",
"@vue/test-utils": "^1.2.1",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.0.5",
"electron": "^19.0.1",
"eslint-config-prettier": "^8.3.0",
"jest": "^27.0.5",
"prettier": "^2.3.2",
"ts-jest": "^27.0.3",
"vue-jest": "^3.0.4"
}
```
## [[Electron]] x [[Nuxt2]] x [[Element UI]]のプロジェクト作成
### [[electron-nuxt]]を使ってみる
```console
$ npm install -g vue-cli
$ vue init michalzaq12/electron-nuxt electron-nuxt-bridge
? Application Name electron-nuxt-bridge
? Application Id com.example.app
? Project description An electron-nuxt project
? Author tadashi-aikawa <
[email protected]>
? Select which ui-components framework install Element
? Select which css pre-processor install none
? Select which icon set install none
? Use typescript? Yes
? Use linting with ESLint? No
vue-cli · Generated "electron-nuxt-bridge".
vue-cli · All set. Welcome to your new electron-nuxt project!
Make sure to check out the documentation at
https://github.com/michalzaq12/electron-nuxt#documentation
To get started:
cd electron-nuxt-bridge
yarn install
yarn dev
```
`npm install`でエラーが出てこけた。。ダメだ。。1つずつやっていくか。。
## [[Nuxt Bridge]] x [[Element UI]]のプロジェクト作成
アプローチを変えて[[Electron]]以外の部分を先につくる。
### [[Nuxt Bridge]]のプロジェクト作成
[[📜2021-11-02 Nuxt Bridgeを使ってNuxt2のTypeScriptプロジェクトでVuetifyとComposition APIを動かしてみる]] を参考に。
```console
$ npm init nuxt-app electron-nuxt-bridge
Need to install the following packages:
create-nuxt-app
Ok to proceed? (y) y
create-nuxt-app v3.7.1
✨ Generating Nuxt.js project in electron-nuxt-bridge
? Project name: electron-nuxt-bridge
? Programming language: TypeScript
? Package manager: Npm
? UI framework: Element
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: Prettier
? Testing framework: Jest
? Rendering mode: Single Page App
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Continuous integration: None
? Version control system: Git
```
`npm run dev`すると[[Nitro Engine]]がエラーを吐くので[[nuxt.config]]で無効にする。
```ts
bridge: {
nitro: false,
},
```
`localhost:3000`に接続できればOK。残るは以下2つの対応。
- [ ] [[Electron]]
- [ ] [[SQLite]]
## [[Electron]]をインストール
[Quick Start \| Electron](https://www.electronjs.org/docs/latest/tutorial/quick-start#create-your-application) を参考に[[Electron]]をインストールする。
```console
$ npm install --save-dev electron
$ npm list electron
[email protected] C:\Users\tadashi-aikawa\work\electron-nuxt-bridge
`--
[email protected]
```
環境変数を指定したいので[[cross-env]]もインストール。
```console
npm i -D cross-env
```
`main.ts`のスクリプトで以下のimportができずハマっている。。
```ts
import { runCommand } from 'nuxi-edge/dist'
```
厳しいかも。。
## その後の動き (2022-07-02)
[[Nuxt Bridge]]の対応は難しそうだが、本来モチベとしていた[[script setup]]の利用に関しては [[📜nuxt2.15.8 x TypeScript x Electronのプロジェクトでvue.jsを2.7にアップデートしてみた]] ことで解消した。