v-safe

Vue.js directive to show text values from deep objects without any errors

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