Vue nullable loader (?.)

This package allows you to use optional chaining operator (?.) in Vue components.

Installation

npm i --save-dev vue-nullable-loader 

Example

The optional chaining operator (?.) enables you to read the value of a property located deep within a chain of connected objects without having to check that each reference in the chain is valid.

But Vue components doesn't support this operator. Normally code below will throw Module build failed: SyntaxError: Unexpected token

<template>
  <div v-if="obj.inner_obj1?.message">
    {{ obj?.inner_obj1?.message }}
  </div>
</template>

<script>
  export default {
    computed: {
      objMessage() {
        return this.obj?.inner_obj1?.message
      }
    }
  }
</script>

With this loader your code will be transformed to:

<template>
  <div v-if="obj.inner_obj1 && obj.inner_obj1.message">
    {{ obj && obj.inner_obj1 && obj.inner_obj1.message }}
  </div>
</template>

<script>
  export default {
    computed: {
      objMessage() {
        return this.obj && this.obj.inner_obj1 && this.obj.inner_obj1.message
      }
    }
  }
</script>

Usage

In your webpack.*.js file add vue-nullable-loader to /\.vue$/ loading rules.

module.exports = {
  module: {
    rules: [
      // Variant 1
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        // options: ... 
      },
      {
        test: /\.vue$/,
        loader: 'vue-nullable-loader',
      }
...
      // Variant 2
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader',
            // options: ...
          },
          'vue-nullable-loader'
        ]
      }
    ]
  }
}

Note that vue-nullable-loader must go after vue-loader.