Support for Vue.js

[nivv]

Would be nice to add suport for Vue.js

[othree]

Could you help me summarize some data, sample here

[nivv]

Sure.

Vue components are mashed up in a template, script tag and css. Simple example below:

<style>
.js-spinner {
    position: absolute;
}
</style>

<template>
    <div style="position:relative">
        <div class="js-spinner" id="loadSpinner" v-el:spinner></div>
    </div>
</template>

<script>
export default {
    name: 'SpinLoader',
    props: {
        loading: {
            type: Boolean,
            default: true
        },
        position: {
            type: String,
            default: 'absolute'
        }
    },
    ready: function() {
        this.startSpinner();
    },
    data() {
        return {
            spinner: {},
        }
    }
}

</script>

The JS in the script tags are pretty much spot on already. I'll list the custom elements that can be attached in the templates below:

Class binding

<div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>

Short hand of above (true for all v-bind)
<div class="static" @class="{ 'class-a': isA, 'class-b': isB }"></div>

Array syntax

<div v-bind:class="[classA, isB ? classB : '']">

Style binding

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Above activeColor is a javascript variable.

Conditionals

v-if

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-show

<h1 v-show="ok">Hello!</h1>

There are a lot more, of course, they're all pretty well documented. VueJS docs

Do you need more or have I misunderstood what you wanted in the first place? 😄

[Blackskyliner]

If you just want support for the .vue specific case (its just that it has more than 1 file context, e.g. template, style, script) you can use https://github.com/posva/vim-vue which will split those apart and let vim handle the blocks in their respective language. (as far is I understood - no vim pro here)

The completion for the html-custom-attribs and all omni completion stuff however would be needed to get implemented via another plugin, like the current one this issue is opened in.

So a list of all custom html attributes in their variations would be needed. Also the methods/interfaces the Vue class offers. (e.g. methods, utils, ...).

[othree]

I think @Blackskyliner's suggestion is very good.
I will add custom attributes to html for vue first.
And you should be able to see it by vim-vue.