**Warning**: This is a work-in-progress. Avoid using in production.
npm install vue-tinybase-monorepoWarning: This is a work-in-progress. Avoid using in production.
Please open github issues for any feature requests or questions.
Note: For all props marked as "reactive" - they accept values, functions that return values or references (including computed references)
- Setup
- Usage
- Composables
- useStore
- useValues
- useValue (writable)
- useTables
- useTable
- useRow
- useCell (writable)
- Usage with TypeScript
Make sure you have a TinyBase store set-up.
``shell`
npm install --save vue-tinybase
This will be "default" store used by composables.
If this store is not passed - you have to manually pass store as the last argument to every composable.
`js
const app = createApp(App)
// store should be imported from where it is created
app.use(createTinybaseVue(store))
`
Returns the default store used in the "Connect TinyBase Store to Vue" step.
Note: This is not a ref, this comes a the store itself.
`typescript
const store = useStore()
function setAsCompleted() {
store.setCell('todos', rowId, 'completed', true)
}
`
Returns a readonly computed reference to all the values from a store.
#### Params:
- store?: Store
`vue`
Store is {{ values.open ? 'open' : 'closed' }}
Returns a writable computed reference to a value from a store.
#### Params:
- valueId: string (reactive)store?: Store
-
`vue`
Returns a readonly computed reference to all the tables from a store.
#### Params:
- store?: Store
`vue
Species
Count
Sold
{{ row.species }}
{{ row.count }}
{{ row.sold }}
`
Returns a readonly computed reference to a table from a store.
#### Params:
- tableId: string (reactive)store?: Store
-
`vue
Species
Count
Sold
{{ row.species }}
{{ row.count }}
{{ row.sold }}
`
Returns a readonly computed reference to a row from a table.
#### Params:
- tableId: string (reactive)rowId: string
- (reactive)store?: Store
-
`vue
{{ pet.species }}
{{ pet.count }}
{{ pet.sold }}
`
Returns a writable computed reference to a cell from a store.
#### Params:
- tableId: string (reactive)rowId: string
- (reactive)cellId: string
- (reactive)store?: Store
-
`vue
`
Usage with typescript is only well-supported for a single store.
Check packages/examples/todolist-ts for a working example.
Expose your store type definitions to be imported elsewere. Here's a simple example: (also available in packages/examples/todolist-ts).
`typescript
import { createStore } from 'tinybase/with-schemas'
export const store = createStore().setTablesSchema({
todos: {
text: { type: 'string' },
completed: { type: 'boolean', default: false },
},
})
export type Store = typeof store // this line exposes the type
`
Add to your global .d.ts a definition based on your store types.
`typescript
declare module 'vue-tinybase/typed' {
import type { Store } from '@/store' // import from your type definition
import type {
TypedUseCellFunction,
TypedUseRowFunction,
TypedUseStoreFunction,
TypedUseTableFunction,
TypedUseTablesFunction,
TypedUseValueFunction,
TypedUseValuesFunction,
} from 'vue-tinybase'
export const useStore: TypedUseStoreFunction
export const useValues: TypedUseValuesFunction
export const useValue: TypedUseValueFunction
export const useTables: TypedUseTablesFunction
export const useTable: TypedUseTableFunction
export const useRow: TypedUseRowFunction
export const useCell: TypedUseCellFunction
}
`
Alias vue-tinybase/typed to be resolved to vue-tinybase in your bundler.
Example with vite:
`typescript
import { fileURLToPath, URL } from 'node:url'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue-tinybase/typed': 'vue-tinybase',
},
},
})
`
Import all composables from vue-tinybase/typed instead of vue-tinybase`