Example application: This project is a simple integration Jexia.com with Todo PWA (Progressive Web App) inspired by TodoMVC. Perfect to learn the basics about Jexia.com, Vue.js, Vuex and Vuetify technologies.
Live Demo
- Jexia project
- Vue CLI 3 + Webpack + vue-loader for single file Vue components
- Hot-reload in development
- Lint-on-save with ESLint (Standard)
- Stylus CSS preprocessor
- Vue + vue-router + vuex working together
- Vuetify a-la-carte (reduce project's size in production)
- Progressive Web App
- App manifest
- Service worker
- Workbox options - Cache Google Fonts
- 100/100 Lighthouse score
| Name | Description | |
|---|---|---|
| jexia | Cloud data management ecosystem | 🖖 |
| vue | Progressive JavaScript Framework | 🖖 |
| vue-cli-3 | ️Standard Tooling for Vue.js Development | 🛠️ |
| vue-router | Official Router for Vue.js | 🚦 |
| vuex | ️Centralized State Management for Vue.js | 🗃️ |
| vuetify | ️Material Component Framework for Vue.js | 📚 |
| Name | Description | |
|---|---|---|
| jexia-js-sdk | JS SDK for Jexia platform | 🎨 |
| stylus-loader | CSS preprocessor for webpack | 🎨 |
| vue/cli-plugin-babel | Compiler for next generation JavaScript | 🐠 |
| vue/cli-plugin-eslint | Pluggable JavaScript linter | ✍️ |
| vue/cli-plugin-pwa | JavaScript Library for adding support to PWA | 📱 |
git clone https://github.com/jexia/jexia-vue-todo.git
cd jexia-vue-todo
npm install
npm install jexia-sdk-js node-fetch ws --save
1. Create project
2. Add dataset with/ without fields with name todo
3. Add API-key
4. Create CRUD policy for API and Dataset
5. Update jexia-vue-todo/src/store.js with your project-id , API-key, API-secret:
const Jexia_API = {
projectID: "project_id", // Your Project ID at Jexia
key: "API key", // Your API key at Jexia
secret: "API Secret", // Your API secret at JEXIA
}
npm run serve
npm run build
npm run lint
MIT © jexia