Collection of Vue Composables in addition to VueUse.org.
npm i -D @scriptpilot/vueuse
// Import to the application store or to any component
import { useComposable } from '@scriptpilot/vueuse'
// Initalize the composable
const composable = useComposable({ ...options })
// Use a method
composable.method({ ...options })
// Use a state
console.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.
To test the composables locally and review code samples:
- Install Docker and Node.js
- Clone this repository and run
npm install - Run
npm run devto start the Demo App
To use the Google-related composables:
- Create a Google Cloud project
- Activate the Drive API and create an OAuth client
- Modify and save the credentials.template.js file as credentials.js
Identify the type of anything.
// Methods
getType({ value }) // Returns the type of the given value as a stringCreate a persistent reactive state for any value type.
// Options
localStorageKey // Local Storage key to make the state persistent
defaultValue // Default value, for objects, it will be merged with the local storage
// Methods
reset() // Reset value to the default value
// State
state // Read/Writable reactive stateManage collections easily.
// Options
localStorageKey // Local Storage key to make the collection persistent, optional
primaryKey // Primary key used by all documents, default is $key
// Methods
addDoc({ doc }) // Add new document, key is created as UUID v4 if not provided
updateDoc({ key, updates }) // Apply the updates to the documemt with the given key
removeDoc({ key }) // Remove the document with the given key
setDocs({ docs }) // Replace all documents, create keys if not provided
// State
documents // Read-only reactive array with all documents of the collectionMySQL API Wrapper for the PHP CRUD API.
// Options
apiUrl // API endpoint, defaults: http://localhost:8000/api.php in dev, /api.php in prod
// Methods
isAvailable() // Returns true if API is available or false if not
apiRequest({ path, method, data }) // Returns promise, resolves with JSON response
createDoc({ table, doc }) // Returns promise, resolves with record key
updateDoc({ table, key, updates }) // Returns promise, resolves with record key
deleteDoc({ table, key }) // Returns promise, resolves with record key
getDoc({ table, key }) // Returns promise, resolves with record
getCollection({ path }) // Returns promise, resolves with record array
uuid() // Returns a new UUID v4 stringCollection with automatic synchronization with a MySQL table based on the PHP CRUD API.
// Options
localStorageKey // Local Storage key to make the collection persistent, optional
primaryKey // Primary key used by all documents, default is $key
apiUrl // API endpoint, /api.php file by default
syncTable // Table name for the PHP CRUD API
syncFilter // Filter options for the PHP CRUD API, optional
syncInterval // Sync interval in milliseconds, 1.000 by default
syncStatus // Sync status, true by default
// Methods
addDoc({ doc }) // Add new document, key is created as UUID v4 if not provided
updateDoc({ key, updates }) // Apply the updates to the documemt with the given key
removeDoc({ key }) // Remove the document with the given key
setDocs({ docs }) // Replace all documents, create keys if not provided
runSync() // Run sync manually
startSync() // Start automatic synchronization
stopSync() // Stop automatic synchronization
// State
documents // Read-only reactive array with all documents of the collectionRequires 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,Sign-in users via Google and use the access token for API requests.
// Options
clientId // Google OAuth Client ID
clientSecret // Google OAuth Client Secret
redirectUrl // Redirection URL, optional, website origin by default
scope // Scope as string or array
// Methods
signIn() // Sign-in user to Google via redirect
signOut() // Sign-out user from Google
// State
token // Readonly, reactive access token, automatically refreshed