Why

This is meant to avoid this type of error when you are using deep objects, that usually can happen when you're expecting a deep object after a Promise

<span>{{ a.b.c.d }}</span>

[Vue warn]: Error in render: "TypeError: Cannot read property 'c' of undefined"

How to install

npm

$ npm install v-safe --save

yarn

$ yarn add v-safe

Quick start

Vue.js

You can import in you main.js file

import Vue from 'vue'
import VSafe from 'v-safe'

Vue.use(VSafe)

Nuxt.js

You can import as a Nuxt.js plugin

~/plugins/v-safe.js

import Vue from 'vue'
import VSafe from 'v-safe'

Vue.use(VSafe)

and then import it in your nuxt.config.js file

plugins: [
  '~/plugins/v-safe.js'
]

Basic usage

<template>
  <span v-safe="'a.b.c.d'"></span>
</template>

<script>
export default {
  data:() => ({
    a: {
      b: {
        c: {
          d: 'safe'
        }
      }
    }
  })
}
</script>

Development

Fork the project and enter this commands in your terminal

git clone https://github.com/YOUR_GITHUB_USERNAME/v-safe.git
cd v-safe
yarn

License

MIT © guastallaigor