Nano-SQL-Vue
VueJS Mixin for use with nanoSQL.
NanoSQL is a powerful database/datastore with tons of RDBMS features, Undo/Redo, and optional built in persistence to Indexed DB, WebSQL or LocalStorage.
This module lets you easily attach the rendering for your Vue components to specific nanoSQL tables and queries.
Automatically handles binding and unbinding event listeners, triggering changes and returning them to your component.
Only adds 1.2Kb to your project. :)
Examples
Includes Typescript typings but still plays nice with Babel and ES5 projects.
Installation
Typescript/Webpack/NodeJS/etc
npm i nano-sql-vue --save
Browser
You can simply include this script in your head:
<!-- nanoSQL Vue Mixin --><!-- nanoSQL -->
Make sure you have NanoSQL also loaded on the page for this to work.
Usage
// if not using in the browser...;; ;
As an additional note, the nSQLonChange method will be called once on component mount to bring in any state from nanoSQL, then any subsequent nSQLonChange calls will be due to actual events from the database.
You can check to see if it's the first mount call by doing this check in the onChange function: event.notes === ["mount"]
. That will return false
for all standard queries from nanoSQL but true
for the first call on the component mount.
You can learn more about nanoSQL here.