Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soulsam480/elec-sqlite-vue
Testing integration of vue3 + Electron 7.0.0 + SQlite + Sequelize
https://github.com/soulsam480/elec-sqlite-vue
electron sequelize sequelize-models sqlite-sequelize vue
Last synced: about 2 months ago
JSON representation
Testing integration of vue3 + Electron 7.0.0 + SQlite + Sequelize
- Host: GitHub
- URL: https://github.com/soulsam480/elec-sqlite-vue
- Owner: soulsam480
- License: gpl-3.0
- Created: 2020-09-21T06:11:14.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2021-05-12T09:18:14.000Z (over 3 years ago)
- Last Synced: 2023-03-04T01:01:53.786Z (almost 2 years ago)
- Topics: electron, sequelize, sequelize-models, sqlite-sequelize, vue
- Language: TypeScript
- Homepage:
- Size: 252 KB
- Stars: 16
- Watchers: 2
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: COPYING.txt
Awesome Lists containing this project
README
## Vue 3 + Electron + Sqlite + Sequelize
POC for Electron app with Vue 3 frontend and persisted database with SQlite.
#### Setup
Inside project root folder
note: I prefer using yarn as npm is highly unstable with electron and vue integration
```bash
yarn
yarn electron:serve
```
To Build App for OS executables
```bash
yarn electron:build
```
### File Structure
- The project is a normal Vue CLI project. So the file structure is pretty familiar.
- The electron builder plugin adds a new file `src/background.ts` , this serves as the entry point of the electron app.
- `src/data.db` In project SQlite 3 database for testing.
- `getdb.ts` Initiates the Sequelize instance for using the database.
- `main.ts` entry of vue app. It creates the vue instance and mounts the app.
#### Where to code ?
- For adding pages/views for electron app go to > `src/views`.
- For adding components to be used i Vue pages/views go to > `src/components`
- To create new app window / or any electron stuff go to > `src/background.ts`
- For working with database i.e. creating models for sequelize go to > `src/getdb.ts`
#### Config Files
- `tsconfig.json` for configuring typescript.
- `vue.config.js` Vue config. Not recommended to change anything in this file.
#### A brief note on Sequelize
- Sequelize is a promise based ORM. So using it is pretty easy.
- Whe using sequelize we don't have to create tables as it creates and syncs tables according to the defined models.
- Sequelize models are a abstaction of the data schema or the table schema of a db. So instead of using SQL queries for creating tables we can make sequelize to do that by using models.
- A sample model `User` is defined in `src/getdb.ts`. Learn more about sequelize [Models](https://sequelize.org/master/manual/model-basics.html)
```javascript
// a sample model USer
const User = sequelize.define('User', {
firstName: {
type: DataTypes.STRING,
allowNull: false
},
lastName: {
type: DataTypes.STRING
},
}, {
});
```
- SQL queries are replaced by sequelize model queries .
```javascript
// sample query for model User
// inside an async function
User.findAll().then((res)=>{
console.log(res)
}).catch(err=> console.log(err))
```
Lean more about model Queries [here](https://sequelize.org/master/manual/model-querying-basics.html)
- More about Sequelize can be found in their [Docs](https://sequelize.org/master/). Not that good but functional.
### Notes
- Usage with Vuex is not recommended as it causes the db process to stop on reload.
### Known Bugs
- There are no known bugs as the build was successful with no errors.
- To report a bug create an issue.
### Errors
For errors try googling or contact me!
### References
- [Vue CLI Plugin Electron Builder Docs](https://nklayman.github.io/vue-cli-plugin-electron-builder/)
- [Sequelize Docs](https://sequelize.org/master/)
- [Electron Docs](https://www.electronjs.org/)
- [Vue 3 Docs](https://v3.vuejs.org)