VueModel

Appearance

Getting Started ​

Like to learn by digging into the code? Jump to "Usage" and try our REPL!

You will need: ​

  • pinia (the "store")
  • pinia-orm (a gorgeous layer atop pinia)
  • VueModel Core
  • A driver (while learning, use "pinia-local-storage". It doesn't require a server!)
sh
pnpm add pinia pinia-orm @vuemodel/core @vuemodel/pinia-local-storage
sh
yarn add pinia pinia-orm @vuemodel/core @vuemodel/pinia-local-storage
sh
npm install pinia pinia-orm @vuemodel/core @vuemodel/pinia-local-storage
sh
bun add pinia pinia-orm @vuemodel/core @vuemodel/pinia-local-storage

Setup ​

Here's how we get everything up and running!

ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { createORM } from 'pinia-orm'
import { createVueModel } from '@vuemodel/core'
import { createPiniaLocalStorage, piniaLocalVueModelDriver } from '@vuemodel/pinia-local-storage'

const pinia = createPinia()
const piniaOrm = createORM()

pinia.use(piniaOrm)
const piniaLocalStorage = createPiniaLocalStorage({
  frontStore: pinia,
})

const vueModel = createVueModel({
  default: 'local',
  drivers: {
    local: {
      implementation: piniaLocalVueModelDriver,
      config: { pinia }
    }
  },
})

const app = createApp({})

app.use(pinia)
app.use(vueModel)
app.use(piniaLocalStorage)
app.use(piniaOrm)
ts
import { boot } from 'quasar/wrappers'
import { createApp } from 'vue'
import { createVueModel } from '@vuemodel/core'
import { createPiniaLocalStorage, piniaLocalVueModelDriver } from '@vuemodel/pinia-local-storage'

export default boot(({ app, store }) => {
  const piniaLocalStorage = createPiniaLocalStorage({
    frontStore: store,
  })

  const vueModel = createVueModel({
    default: 'local',
    drivers: {
      local: {
        implementation: piniaLocalVueModelDriver,
        config: { pinia: store }
      }
    },
  })

  app.use(vueModel)
  app.use(piniaLocalStorage)
})

Want to be able to test loading? If you're using "pinia-local-storage", consider adding a "mock latency". This is kinda like mimicking a slower internet connection.

(add this to main.ts)

ts
import { piniaLocalStorageState } from '@vuemodel/pinia-local-storage'

piniaLocalStorageState.mockLatencyMs = 250 // add a 250ms delay to every request

Creating our first Model ​

We use PiniaORM to manage models on the frontend. This doc will give examples to get you up and running, yet we highly recommend going through the PiniaORM Documentation. It's the foundation of VueModel.

To start, we sugget creating a src/models directory for our models.

(copied from https://pinia-orm.codedredd.de/guide/getting-started/quick-start)

User Model ​

js
// User Model
import { Model } from 'pinia-orm'
export default class User extends Model {
  // entity is a required property for all models.
  static entity = 'users'
  // List of all fields (schema) of the post model. `this.string()` declares
  // a string field type with a default value as the first argument.
  // `this.uid()` declares a unique id if none provided.
  static fields () {
    return {
      id: this.uid(),
      name: this.string(''),
      email: this.string('')
    }
  }
  // For typescript support of the field include also the next lines
  declare id: string
  declare name: string
  declare email: string
}
ts
// User Model

import { Model } from 'pinia-orm'
import { Str, Uid } from 'pinia-orm/decorators'

export default class User extends Model {
  // entity is a required property for all models.
  static entity = 'users'

  @Uid() declare id: string
  @Str('') declare name: string
  @Str('') declare email: string
}

Post Model ​

js
// Post Model

import { Model } from 'pinia-orm'
import User from './User'

export default class Post extends Model {
  static entity = 'posts'

  // `this.belongsTo(...)` declares this post belongs to a user. The first
  // argument is the `User` model class. The second is the field name for
  // the foreign key `userId`.
  static fields () {
    return {
      id: this.uid(),
      userId: this.attr(null),
      title: this.string(''),
      body: this.string(''),
      published: this.boolean(false),
      author: this.belongsTo(User, 'userId')
    }
  }
  
  declare id: string
  declare userId: string | null
  declare title: string
  declare body: string
  declare published: boolean
  declare author: User | null
}
ts
// Post Model

import { Model } from 'pinia-orm'
import { Attr, BelongsTo, Bool, Str, Uid } from 'pinia-orm/decorators'
import User from './User'

export default class Post extends Model {
  static entity = 'posts'

  @Uid() declare id: string
  @Attr(null) declare userId: string | null
  @Str('') declare title: string
  @Str('') declare body: string
  @Bool(false) declare published: boolean
  @BelongsTo(() => User, 'userId') declare author: User | null
}

Usage ​

To give you a taste of what's to come, here's how we can create a resource! All examples in this doc use Quasar for the UI.

  • Click button to open an editor and play with the example.
  • Click to see the source code.

Create User

Create Post