How to avoid "Component is declared but its value is never read." when I use Vue3 setup syntax?

Question

<template>
  <ConfigProvider :locale="getAntdLocale">
    <AppProvider>
      <RouterView />
    </AppProvider>
  </ConfigProvider>
</template>

<script lang="ts" setup>
  import { ConfigProvider } from 'ant-design-vue';
  import { AppProvider } from '/@/components/Application';
  import { useTitle } from '/@/hooks/web/useTitle';
  import { useLocale } from '/@/locales/useLocale';

  // support Multi-language
  const { getAntdLocale } = useLocale();

  // Listening to page changes and dynamically changing site titles
  useTitle();
</script>

Vetur shows this warning:

'ConfigProvider' is declared but its value is never read.Vetur(6133)

'getAntdLocale' is declared but its value is never read.Vetur(6133)

It seems the template can't read the script with setup syntax variable. How can I avoid this warning?

Answer 1

Vetur has no support for script setup yet - it is planned for v0.37.0 (current version is 0.34.1)

As of now, Volar is better choice for using script setup and TS and is recommended even by Evan You (Vue creator). I'm using it and it is really great!

UPDATE: And with Vue 3 as the New Default, Volar is recommended in official Vue 3 docs