Skip to content

✔️ Example application: A simple integration Jexia and Todo PWA built with Vue CLI 3 + Vuex + Vuetify.

License

Notifications You must be signed in to change notification settings

jexia/jexia-vue-todo

 
 

Repository files navigation

Runme

Todo App - JEXIA integration for vuetify-todo-pwa

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

Features

  • 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

Built With

Dependencies

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 📚

Development Dependencies

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 📱

Installation & Setup

Clone repository

git clone https://github.com/jexia/jexia-vue-todo.git
cd jexia-vue-todo

Install dependencies

npm install

Install Jexia JS SDK

npm install jexia-sdk-js node-fetch ws --save

Setup Jexia project

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
	}

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

License

MIT © jexia

About

✔️ Example application: A simple integration Jexia and Todo PWA built with Vue CLI 3 + Vuex + Vuetify.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 50.4%
  • Vue 43.6%
  • HTML 5.4%
  • Dockerfile 0.6%