VueJS template for PHPStorm

Posted 4 years ago - updated 4 years ago phpstorm vuejs

Simple Template

<template>

</template>

<script>
        export default {

                props: [],

                data: function() {
                    return {
                    }
                },
                mounted() {

                },

                methods: {

                        getSomething: function() {
                                this.${DS}http.get('api/something').then((response) => {
                                    this.booking = something.data
                                })
                        },

                        createSomething: function () {
                                this.${DS}http.post('api/something', this.guest).then((response) => {
                                })
                        },

                        updateSomething: function(id) {
                             this.${DS}http.put('api/something/' + id, this.guest).then((response) => {
                                })
                     },

                        patchSomething: function(id) {
                             this.${DS}http.patch('api/something', { selected_product: id } ).then((response) => {
                                })
                        },

                     deleteSomething: function (id) {
                                this.${DS}http.delete('api/guest/' + id).then((response) => {
                                })
                        }
            }
        }
</script>

Longer template

<template>
<div>
    <header-component/>
    <div>this is template body</div>
    <other-component/>

    <a v-bind:href="url"></a>

    <div v-if="1>2">
            <h1>Hello</h1>
    <div v-else>
            <h1>Goodbye</h2>
    </div>

    <button v-on:click="counter += 1">Add 1</button>
    <button v-on:click.prevent="counter += 1">Add 1</button>
    <img v-attr="src: imageLink">
</div>
</template>

    <style>
            body{
                    background-color:#ff0000;
            }
    </style>
    <script>
            import HeaderComponent from './components/header.vue'
            import OtherComponent from './components/other.vue'
            export default{
                    data(){
                            return{
                                    msg:'hello vue'
                            }
                    },
                    components:{
                            'other-component':OtherComponent,
                            HeaderComponent,
                    },

                    created: function() {

                    },

                    mounted: function () {
                    },

                    watch: {
                        firstName: function (val) {
                            this.fullName = val + ' ' + this.lastName
                        },
                        lastName: function (val) {
                            this.fullName = this.firstName + ' ' + val
                        },
                        middlename: {
                            handler: function (val, oldVal) { /* ... */ },
                                deep: true
                        }
                    },

                    computed: {
                    },

                    methods: {

                            sampleFunction: function(params) {
                                    var that = this;
                            },

                            sampleGet: function(params) {

                                 this.$http.get('/url').then((response) => {
                                                // all good
                                 }, (response) => {
                                                // bad
                                 })      
                            },

                            samplePost: function(params) {

                                data = {};
                                data.url = this.url;

                                this.$http.post('/url',data).then((response) => {
                                            // all good
                                 }, (response) => {
                                                // bad
                                 })  
                            }
                        }
            }
    </script>

VueRouter

    <script>
     beforeRouteEnter(route, redirect, next) {
        next(vm => {
            vm.get();
            console.log('In page 1')
    })
    },
    </script>       

Using in PHPStorm

Note you have to make sure $ dollar signs are excaped using ${DS} more

Add in Preferences>Editor:

Now when you create a new file you will have this template ready to edit :)