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