Vue Use

Collection of Vue Composables in addition to VueUse.org.

Installation

npm i -D @scriptpilot/vueuse

Usage

// Import to the application store or to any componentimport{useComposable}from'@scriptpilot/vueuse'// Initalize the composableconstcomposable=useComposable({ ...options})// Use a methodcomposable.method({ ...options})// Use a stateconsole.log(composable.state.value)

• Each composable can accept an object with options.
• Each composable can return methods and reactive state objects
• Each method can accept an object with options as well

Objects are used to make the composables and functions parameters more explicit, flexible and to allow backward-compatibility if new parameters are added in the future.

Demo App

To test the composables locally and review code samples:

1. Install Docker and Node.js
2. Clone this repository and run npm install
3. Run npm run dev to start the Demo App

To use the Google-related composables:

1. Create a Google Cloud project
2. Activate the Drive API and create an OAuth client
3. Modify and save the credentials.template.js file as credentials.js

Composables

Type

Identify the type of anything.

// MethodsgetType({ value })// Returns the type of the given value as a string

LocalStorage

Create a persistent reactive state for any value type.

// OptionslocalStorageKey// Local Storage key to make the state persistentdefaultValue// Default value, for objects, it will be merged with the local storage// Methodsreset()// Reset value to the default value// Statestate// Read/Writable reactive state

Collection

Manage collections easily.

// OptionslocalStorageKey// Local Storage key to make the collection persistent, optionalprimaryKey// Primary key used by all documents, default is $key// MethodsaddDoc({ doc })// Add new document, key is created as UUID v4 if not providedupdateDoc({ key, updates })// Apply the updates to the documemt with the given key removeDoc({ key })// Remove the document with the given keysetDocs({ docs })// Replace all documents, create keys if not provided// Statedocuments// Read-only reactive array with all documents of the collection

MySQLAPI

MySQL API Wrapper for the PHP CRUD API.

// OptionsapiUrl// API endpoint, defaults: http://localhost:8000/api.php in dev, /api.php in prod// MethodsisAvailable()// Returns true if API is available or false if notapiRequest({ path, method, data })// Returns promise, resolves with JSON responsecreateDoc({ table, doc })// Returns promise, resolves with record keyupdateDoc({ table, key, updates })// Returns promise, resolves with record keydeleteDoc({ table, key })// Returns promise, resolves with record keygetDoc({ table, key })// Returns promise, resolves with recordgetCollection({ path })// Returns promise, resolves with record arrayuuid()// Returns a new UUID v4 string

MySQLCollection

Collection with automatic synchronization with a MySQL table based on the PHP CRUD API.

// OptionslocalStorageKey// Local Storage key to make the collection persistent, optionalprimaryKey// Primary key used by all documents, default is $keyapiUrl// API endpoint, /api.php file by default syncTable// Table name for the PHP CRUD APIsyncFilter// Filter options for the PHP CRUD API, optionalsyncInterval// Sync interval in milliseconds, 1.000 by defaultsyncStatus// Sync status, true by default// MethodsaddDoc({ doc })// Add new document, key is created as UUID v4 if not providedupdateDoc({ key, updates })// Apply the updates to the documemt with the given key removeDoc({ key })// Remove the document with the given keysetDocs({ docs })// Replace all documents, create keys if not providedrunSync()// Run sync manuallystartSync()// Start automatic synchronizationstopSync()// Stop automatic synchronization// Statedocuments// Read-only reactive array with all documents of the collection

Requires a MySQL table with some additional fields.

`$key`varchar(36) NOT NULL,
`$updated`bigint(14) NOT NULL, `$synchronized`bigint(14) NOT NULL, `$deleted`tinyint(1) NOT NULL DEFAULT 0,

Google Auth

Sign-in users via Google and use the access token for API requests.

// OptionsclientId// Google OAuth Client IDclientSecret// Google OAuth Client SecretredirectUrl// Redirection URL, optional, website origin by defaultscope// Scope as string or array// MethodssignIn()// Sign-in user to Google via redirectsignOut()// Sign-out user from Google// Statetoken// Readonly, reactive access token, automatically refreshed