Currently I am using prettier and Vetur but neither one will highlight components unless I code them as which is not the practice of the company I am working for. Anyone have any idea how to get syntax highlighting on vue components when they are written ?
Related
Using Vue.js I some time have a lot of parameters when calling a component in the html like way. And Vetur is completly lost when formating this.
Is there a way to tell Vetur to ignore some lines, in the same way we can do it with eslint ?
Have a situation in which there are two different components, that have templates in which there are 'this' used. Removing all 'this' from templates right now, but saw this situation and got curios why it is happening like this.
In this case it throws error:
<a :href="`${this.$locale() ? "Yes" : "No}`">
In this case it works:
<title :lang="this.$locale()">
These are just examples, but is there a reason that one works and other throws error? Couldn't find any information on this in Vue documentation. Could this be because of ternary operation?
First of all, to be clear for the people reading this, you shouldn't use this inside Vue SFC templates.
To anwser, that's because of how Vue compiles your template and its properties. I'm not an expert on Vue internal mecanics so please take what I say with caution.
:lang="this.$locale() Here, it could be that Vue removes the this reference at build time.
:href="`${this.$locale() ? "Yes" : "No}`" Here you're using a string interpolation, which is evaluated at runtime. Vue has no way to remove the this safely, because it could be refering to something else than the component instance. So this just stays as is in the final bundle and breaks at runtime.
This is just my guess from my understanding of Vue. I think only a Vue maintainer / contributor could anwser this properly.
How can I make it so my HTML in my JS file is not just yellow? How can I give it Syntax Highlighting in VSCode?
Install Vue Inline Template in vscode. here
If you separate your code into components and install the following plugin It will give you IntelliSense and syntax highlighting for Vue.
See an example here --> https://codesandbox.io/s/o29j95wx9
Good example of it here from the Vue docs --> https://v2.vuejs.org/v2/guide/single-file-components.html
I think VS code has to see it separated out into blocks below for it to properly do syntax highlighting otherwise it'll just detect what you have declared in the template as strings.
<template></template>
<script></script>
<style></style>
I'm using both Vue.js and HAML in my current project. The templates are parsed by HAML, converted into HTML, then parsed by Vue. For instance:
#pagecontent.nonscrolling
%h2 Demand forecasts
%label{ for:"location-type" } Select location type
%select.form-control#location-type{ v-model:"locationType" }
%option{ v-bind:value:"'foo'" } Foo
It works ok, but it's a bit disconcerting worrying whether all the Vue syntax will make it unscathed through the HAML parser.
But I really like this type of succinct, angle-bracket-less template.
Is there is a cleaner way to achieve this? Some add-on to Vue that supports something similar?
Don't worry to much. There is nothing wrong about using preprocessors. I mean vue depends on wepback where everything is being preprocessed in one way or an other. Out of the box you can use pug with vue so I put more trust in it. It works fine for me without any unexpected problems. Both have the nesting through indentation in common and this is something that starts to be confusing with longer source codes. So I use pug mainly in short components and nest them using named slots into bigger ones.
Your code - pug version (as far I can guess what this HAML code should do)
<template lang="pug">
#pagecontent.nonscrolling
h2 Demand forecasts
label(for="location-type") Select location type
select.form-control#location-type(v-model="locationType")
option(v-bind:value="foo") Foo
</template>
The whole Vuetifyjs website is made with pug:
Vuetifyjs.com Source Code
i got a little Problem, i'm creating a vuejs package in which i use vue-i18n to translate things.
The Problem is, if the user haven't got vue-i18n installed it breaks the package (obviously since i use it).
Do you know a way to prevent this?
My first approach was to just v-if the translations in the template to check if i18n is registered within window, but that obviously won't work if a user names the object differently.
you can check if this.$i18n exists