Does vue-cli 3 come with pre-configured optional chaining?

Hi everyone,

after a while of using Vue.js I finally decided to create my new project on vue-cli 3 as it looks fantastic.
I’m not a webpack/babel master and I can’t find a way to simply list all of the plugins I’m using for babel.

I see there is a lot of new pre-configured babel plugins like rest-spread, destructing, etc., but I’m still wondering if there’s an optional chaining included by default in the vue-cli 3 babel configuration?

If not, is there an easy way to include it? As I had some issues with including it into some older projects of mine, as the babel version plugin was made for was higher than the one most of my projects were using.

Thank you in advance.

No, we don’t include that transform.

We are using the latest Babel (7) so there shouldn’t be any issue. Just install the Babel plugin and add it to babel.config.js

Thanks for helping out.

In case anyone is wondering, it’s really easy:

  1. install @babel/plugin-proposal-optional-chaining and add it to your
  2. add it to your babel’s config plugins as @babel/plugin-proposal-optional-chaining
1 Like

Well, it works, but I’m still wondering: can we use it in template syntax ? Like ${{ user?.id }} or in HTML code like

<html-element v-if="user.profile?.picture" /> 

Is this possible with vue-cli 3? I tried, but it only worked for the script tags


I have the same problem.:neutral_face:

I have the same problem, too.

This ES6 Syntax doesn’t work in templates right now - it requires an update to vue-template-es2015-compiler.

We’ll provide that but it may take a while due to work on Vue 3.


Just tried it in Vue 2 and it still doesn’t seem to work. Moving the code to the script part worked though. Is the support included in Vue 3 now? Or is there a place e.g. Github issue where we can track the progress of this.

@xji you can track the progress for in-template support over at GitHub -