I am already successfully using Vue.js v3 by creating a project with Vue CLI or with Vite. Now I need to have just single .vue files that I can run and build individually. I read this is possible just by using "vue serve myfile.vue" and "vue build myfile.vue", but unfortunately I am having some trouble. I have the last vue-cli version installed. Sure enough if I launch in the command line "vue --version" I get "@vue/cli 4.5.14". Then, in a directory I created a very simple .vue file with the following code:
<template>
<h1>The count is 1</h1>
</template>
If I run "vue serve myfile.vue", everything works fine, then I am happy to continue and make some more interesting things. Now I add a script setup section to the file:
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<h1>The count is {{ count }}</h1>
</template>
Now if I relaunch "vue serve myfile.vue", I get the following error: 4:7 error 'count' is assigned a value but never used no-unused-vars
Ok, I am a newbie about ESLint, so I started to search for something on the internet and I found that I must use a rule that can solve this problem, and the rule is "vue/script-setup-uses-vars". Then I added a new file .eslintrc.json in the root path:
{
"plugins": [
"vue"
],
"rules": {
"vue/no-unused-vars": "warn",
"vue/script-setup-uses-vars": "warn"
}
}
I try again but I get this warning: " 1:1 warning Definition for rule 'vue/script-setup-uses-vars' was not found vue/script-setup-uses-vars". Then I guess it is not working... Nonetheless, if I run again "vue serve myfile.vue", the local server gets created but at the same time I get a different warning:
warning in ./myfile.vue?vue&type=script&setup=true&lang=js&
"export 'ref' was not found in 'vue'
And here I start to not understand. Is my .eslintrc.json file wrong? Why "ref" is not found from "vue"? I searched a lot on the internet but I can't find anything helpful. Can someone explain to me why this doesn't work? Thanks!
