This question already has an answer here:
How to avoid "Component is declared but its value is never read." when I use Vue3 setup syntax?
(1 answer)
Closed 11 months ago.
My VSCode (Vetur) is displaying this warning, however the imported component is being used in the template.
Warning in import :
Component used :
Another issue is that the summaries are appearing in duplicate, as well as the CSS color thumbnails. I have already uninstalled some extensions and reviewed the settings but I couldn't find the option that causes this.
Color duplicate :
Vetur is deprecated and doesn't actually support <script setup>. The Vue docs officially recommend Volar.
Uninstall Vetur, and use Volar instead.
Related
We're currently testing a vue.js app with jest 24.9.0, ts-jest 24.30, and #types/jest 24.9.1 . We see that jest is at v27 and I looked at upgrading, but things broke all over the place, so I backtracked to this combination:
#types/jest: upgrade from 24.9.1 to 26.0.14
jest: upgrade from 24.9.0 to 26.6.3
ts-jest: upgrade from 24.3.0 to 26.5.6 (shouldn't matter).
It now looks like mount(VUE COMPONENT, { propsData: props }) is returning an empty <body /> element (mount is imported from #vue/test-utils).
Anyone have suggestions? We also get many warning messages about finding components with 'find' or 'get' -- how should we replace our querySelector strings (once we actually have sub-elements in the objects returned from mount so there's something to find or get)?
Try referring to the changes here.
Its jest official repo mentioning all the changes with various version. Check if there are any breaking changes.
I try to use instant prototyping in Vue3, having installed #vue/cli and #vue/cli-service-global, got this error:
Failed to compile.
./Alert.vue
Module Error (from /usr/local/lib/node_modules/#vue/cli-service-global/node_modules/eslint- loader/index.js):
/home/xrfang/git/deployer/gui/src/components/Alert.vue
5:3 error The template root requires exactly one element vue/no-multiple-template-root
✖ 1 problem (1 error, 0 warnings)
As far as I know "template root requires exactly one element" is a requirement in Vue2, Vue3 should allow multiple root elements in one template?
As this answer suggests, wrap all the code inside the template tags in a single parent div.
Otherwise, to simply stop the error form displaying, Visual Studio Code (VSC) users can do the following:
Open "extensions" in VSC
Find and open "Vetur" extension by Pine Wu
Click the gear and select "extension settings"
Scroll down to "Vetur > Validation: Template" and uncheck the box
This is built upon #wittgenstein's comment above to "follow the steps in the guide: vuejs.github.io/vetur/guide/linting-error.html#linting"
This worked for me, but beware that I'm a novice and it's possible there are drawbacks to the above that I'm not aware of.
I have two Vue projects, one is an app that is injected in an older website via script-tag and a second project, that is a form, that uses own logic and vuetify components. The later should be used in other projects also and gets props from where it is used. Therefore it should be compiled as a library.
If i compile it as app i can transfer data via a global JS variable, but i would like to use the components like any other library. (Just import it and put it in the <template> like so: <MyComponent ..props../>)
If i compile it as a library i got all sorts of vuetify not correctly initialized. After i cleared them my HTML looked excactly like my code (eg:<v-app>...</v-app>) without any errors.
The 'serve' from the standard installation worked without a problem in the component project.
The component project is created with vue create project and modified according to https://cli.vuejs.org/guide/build-targets.html#library
I already searched online and got only so far, my question on the vue discord was left unanswered, so my questions are:
1. Is this even possible to do?
2. If it is, could you please point me in a direction, or give a summary of what i have to do?
3. If not, is there another way of achieving this, except for copying the raw code into each project?
Short answer, yes. Is it recommended, no.
The best way to do this is to export your form component as a library so that it can be imported into other projects but exclude any dependencies like Vuetify, which should be imported separately. This avoids versioning errors.
The Vue docs on packaging for npm are useful as is this article
Some time ago I developed a form with Vue, importing Vuetify as a library so to speak, despite some warnings the form worked perfectly, it stopped working showing the following error
"Error in getter for watcher" isDark ":" TypeError: this. $ vuetify.theme is undefined "
I do not know if it is due to a change of version of Vue, I already gave several turns to the problem and I find no solution
This is what I mean as I implemented vue and vuetify
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
Also, if you are getting "TypeError: this. $ vuetify.theme is undefined" when trying to move from 1.5 to 2.0, it's like to be a case of not following the upgrade guide correctly.
See the bootstrap bit of https://github.com/vuetifyjs/vuetify/releases#user-content-upgrade-guide. There are some subtle changes in the examples e.g. passing 'vuetify' to new Vue. Not following that bit of the upgrade guide can generate the above error.
I try to duplicate the creation of Symbol Palette on my component, but I got errors on the types :
let connectorSymbols: ConnectorModel[] = [...]
or
let palettes : any
I have syntax error, I am a beginner on VueJS and I never encountered this kind of declaration.
Could you help me ?
I use a boilerplate vue and webpack, is that enough ?
The following details are needed,
We need more information about your exact requirement and if possible provide issue reproducible sample?
Did you follow all the steps in the getting-started documentation to create Vue ColorPicker sample using Webpack?
We have created simple Vue ColorPicker sample using webpack and it can be download from here.