Is there a way to get VS Code to support folding blocks within Pug when used in Vue single-file components? That is:
<template lang="pug"
...
</template>
Based on this bug report the fact VS Code isn't doing this already seems to be do with using Vetur.
Adding this to settings.json fixed it:
"[vue]": {
"editor.foldingStrategy": "indentation",
}
Related
It's been a time since I have been programming with Vue.
But when I started entering something like vuedef in a newly created .vue file it auto-suggested me the following instead of writing it all on my own:
<template>
</template>
<script>
</script>
<style>
</style>
I can't remember how I did that but I guess it was a certain word I had to type.
Maybe it comes from an VS-Code Addon?
vuedef comes with Vetur: https://marketplace.visualstudio.com/items?itemName=octref.vetur
For any modern Vue3 apps, you can use Volar (it's officially the one to use now too): https://marketplace.visualstudio.com/items?itemName=Vue.volar
Those 2 are also quite nice:
Vue3 snippets: https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
Vue snippets: https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
You should have plenty of choice after that!
You can also create your own snippets of course directly into VScode: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets
In a Vue.js project I am using learning to use Modals from BootstrapVue. In my code I have a file Items.vue with something like this:
<div v-b-modal="'modal-' + query.id"> // this is line 15
...
</div>
<b-modal :id="'modal-' + query.id">
<p class="my-4">
hello
</p>
</b-modal>
It works well. However, Intellij IDEA with the Vue.js plugin keeps beeping with the Warning:
Warning:(15, 5) Attribute v-b-modal is not allowed here
The thread Vue Attribute is not allowed here suggests that this happens with non-.vue files, but it is not the case here.
Replacing v-b-modal="..." with :v-b-modal="..." (that is, with : before the attribute to make the binding more explicit) removes the warning, but then the code does not work.
I am working with Intellij IDEA 2018.1.8.
IDEA version you are using is very old, Vue.js support has been significantly improved since v. 2018.1. In particular, WEB-38028 was fixed in 2019.2. Please consider upgrading IDEA to the most recent version, BootstrapVue directives are correctly recognized there
I am starting to learn Vue, using Visual Studio Code. I downloaded an extension that adds Vue code snippets (Vue 2 Snippets by hallowtree).
When I start to type "v" in a Vue template, suggestions are shown (v-on, v-bind, etc.),
but afterward, no suggestions or autocompletions are shown.
In the following example template, v-on is suggested, but afterward, no suggestions for "click" or any other event. Also, nothing is suggested after "#":
<button v-on:click="changeLink">Click to change Link</button>
<button #click="changeLink">Click to change Link</button>
And in this example, v-bind is suggested, but afterward, no suggestions for "href" or any other HTML properties/attributes:
<a v-bind:href="link">Link</a>
<a :href="link">Link</a>
Although it's good for me for practicing, it will become a liability.
Are there any extensions, options, or commands I can set up to improve the developer experience?
Vetur has had experimental template interpolation for autocomplete and "diagnostics / hover / definition / references" within HTML templates since February 2019.
Enable the Vetur › Experimental: Template Interpolation Service option in your VS Code settings to turn on this feature.
add the Vetur extension on visual-studio-code it includes many other nice features besides auto completion vue code
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>
What is the correct way of importing javascript modules into vue-components?
I currently have a vue-component component.js:
Vue.component('component', {
name: 'component',
props: ['pdf'],
template: ` ...
I want to take a pdf-url as a prop and use pdf.js within the component, but I'm having trouble finding the right way/standard way to import pdf.js into my project.
Worth noting is that I'm not using vue-cli, or any other kind of bundler like Webpack, so my project structure might be a bit different from standard project structures. I access my components from a main.html file in which I have imported both vue and the components in script-tags in the head of the html. Would I simply import pdf.js in the same manner (head in the main.html file), or is there a "vue"-way of doing it?
If you are not using webpack or any other packager, then I will recommend you to stick to the old fashion way, just use pdf.js as script in your html and make use of the API as it is in the official documentation, such as: pdf.getPage(1).then(...)
Hope it helps.
Cheers