</script> <script setup> import ref from 'vue' const count = ref(0) </script> <template> <button @click="count++"> count </button> </template> Optional chaining and nullish coalescing <template> <div> user?.address?.city ?? 'Unknown' </div> </template> Reactivity Transform (opt-in) Enable via vue-loader config:
// vue.config.js (vue-cli) module.exports = chainWebpack: config => config.module .rule('vue') .use('vue-loader') .tap(options => ( ...options, reactivityTransform: true, )); , ; Then write: upgrade vue 2.6 to 2.7
// webpack.config.js module.exports = module: rules: [ test: /\.vue$/, loader: 'vue-loader', , ], , plugins: [ new (require('vue-loader')).VueLoaderPlugin(), ], ; If using vue-cli (v4 or v5), no action is needed – it handles the update automatically. Vue 2.7 ships with its own TypeScript declarations. Remove any custom shims-vue.d.ts that redeclare .vue modules. Remove any custom shims-vue
npm install -g vetur@latest # or update via VS Code extensions If using ESLint plugin for Vue: remove them. Update vetur to latest:
npm uninstall vue-template-compiler npm uninstall @vue/composition-api Then update imports:
If you used @vue/runtime-dom or @vue/runtime-core types, remove them. Update vetur to latest: