Vue-TinyBase

Warning: 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

Setup

Make sure you have a TinyBase store set-up.

1. Install vue-tinybase

``shell
npm install --save vue-tinybase
`

2. Connect TinyBase Store to Vue

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))
`

Usage

Composables

$3

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)
}
`

$3

Returns a readonly computed reference to all the values from a store.

#### Params:

- store?: Store

`vue


`

$3

Returns a writable computed reference to a value from a store.

#### Params:

- valueId: string (reactive)
- store?: Store

`vue


`

$3

Returns a readonly computed reference to all the tables from a store.

#### Params:

- store?: Store

`vue



`

$3

Returns a readonly computed reference to a table from a store.

#### Params:

- tableId: string (reactive)
- store?: Store

`vue



`

$3

Returns a readonly computed reference to a row from a table.

#### Params:

- tableId: string (reactive)
- rowId: string (reactive)
- store?: Store

`vue



`

$3

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

Usage with typescript is only well-supported for a single store.

Check packages/examples/todolist-ts for a working example.

$3

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
`

$3

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
}
`

$3

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',
},
},
})
`

$3

Import all composables from vue-tinybase/typed instead of vue-tinybase`