VSCode Vue Snippets -> https://code.visualstudio.com/docs/editor/userdefinedsnippets#_create-your-own-snippets

lexx-php-api-response.json

"Lexx PHP API Response": {
  "prefix": "lexxPHPAPIResponse",
  "scope": "php",
  "body": [
    "$response = $this->repo->$1();",
    "    ",
    "if($response instanceof RedirectResponse)",
    "    return $response;",
    "",
    "if($response instanceof JsonResource || $response instanceof Resource)",
    "    return $response;",
    "",
    "if($response)",
    "    return response()->json([",
    "        'message' => '$2 Updated',",
    "        'alert' => 'success'",
    "    ], 200);",
    "",
    "return response()->json([",
    "    'message' => 'An error occurred',",
    "    'alert' => 'error'",
    "], 422);"
  ],
  "description": "Lexx PHP API Response"
}

lexx-vue-swal.json

"Generate Lexx Vue SWAL": {
  "prefix": "lexxVueSWAL",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
    "this.$swal({",
    "    title: 'Delete This $1 Forever?',",
    "    html: 'Are you sure you want to remove the $1 from the system?',",
    "    animation: false,",
    "    customClass: 'animated fadeInUp',",
    "    showCancelButton: true,",
    "    confirmButtonColor: '#3085d6',",
    "    cancelButtonColor: '#d33',",
    "    confirmButtonText: 'Yes! Do It!'",
    "}).then((result) => {",
    "        if (result.value) {",
    "            return this.obj.destroy(item);",
    "        }",
    "    });"
  ],
  "description": "Generate Lexx Vue SWAL"
},

lexx-vue-template-with-vuex.json

"Generate Lexx Vue Template With Vuex": {
  "prefix": "lexxVueTemplateVuex",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
  "<!--",
  "* Created by VSCode.",
  "* User: Lexx YungCarter",
  "* Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
  "* Time: $CURRENT_HOUR:$CURRENT_MINUTE",
  "-->",
  "",
  "<template>",
  "    <div>",
  "        ",
  "    </div>",
  "</template>",
  "",
  "<script>",
  "  import Obj from '@app/';",
  "  import { mapActions, mapGetters } from \"vuex\";",
  "",
  "  export default {",
  "    data() {",
  "        return {",
  "            obj: new Obj(),",
  "            saveLoader: false,",
  "            dialog: false,",
  "        }",
  "    },",
  "",
  "    computed: {",
  "        ...mapGetters([",
  "            'get$1'",
  "        ]),",
  "",
  "        initialised() {",
  "            return this.list",
  "        },",
  "",
  "        list() {",
  "            return this.obj.list",
  "        },",
  "",
  "        submitted() {",
  "            return this.obj.form.submitted;",
  "        },",
  "        ",
  "        meta() {",
  "            return this.list.meta;",
  "        },",
  "",
  "        links() {",
  "            return this.list.links;",
  "        },",
  "",
  "        contaminated() {",
  "            return this.obj.form.errorDetected;",
  "        },",
  "",
  "        errors() {",
  "            return this.obj.form.errors;",
  "        },",
  "    },",
  "",
  "    watch: {",
  "        submitted() {",
  "            this.saveLoader = false;",
  "        },",
  "",
  "        contaminated(val) {",
  "            this.saveLoader = false;",
  "            if(val) {",
  "                this.obj.form.errorDetected = false;",
  "            }",
  "        },",
  "",
  "        saved(val) {",
  "            if(val) {",
  "                this.saveLoader = false;",
  "                this.dialog = false;",
  "                this.obj.saved = false;",
  "",
  "                // this.get();",
  "            }",
  "        },",
  "    },",
  "    ",
  "    methods: {",
  "        ...mapActions([",
  "            'set$1'",
  "        ]),",
  "",
  "        initialise() {",
  "            // this.get();",
  "        },",
  "",
  "        get(page = null) {",
  "            this.saveLoader = true;",
  "            this.obj.get(page)",
  "        },",
  "    },",
  "    ",
  "    mounted() {",
  "        this.initialise();",
  "    },",
  "}",
  "</script>",
  ""
  ],
  "description": "Generate Lexx Vue Template With Vuex"
}

lexx-vue-template.json

"Generate Lexx Vue Template": {
  "prefix": "lexxVueTemplate",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
  "<!--",
  "* Created by VSCode.",
  "* User: Lexx YungCarter",
  "* Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
  "* Time: $CURRENT_HOUR:$CURRENT_MINUTE",
  "-->",
  "",
  "<template>",
  "    <div>",
  "        $1",
  "    </div>",
  "</template>",
  "",
  "<script>",
  "  import Obj from '@app/';",
  "",
  "  export default {",
  "    data() {",
  "        return {",
  "            obj: new Obj(),",
  "            saveLoader: false,",
  "            dialog: false,",
  "        }",
  "    },",
  "",
  "    computed: {",
  "        initialised() {",
  "            return this.list",
  "        },",
  "",
  "        list() {",
  "            return this.obj.list",
  "        },",
  "",
  "        submitted() {",
  "            return this.obj.form.submitted;",
  "        },",
  "        ",
  "        meta() {",
  "            return this.list.meta;",
  "        },",
  "",
  "        links() {",
  "            return this.list.links;",
  "        },",
  "",
  "        contaminated() {",
  "            return this.obj.form.errorDetected;",
  "        },",
  "",
  "        errors() {",
  "            return this.obj.form.errors;",
  "        },",
  "    },",
  "",
  "    watch: {",
  "        submitted() {",
  "            this.saveLoader = false;",
  "        },",
  "",
  "        contaminated(val) {",
  "            this.saveLoader = false;",
  "            if(val) {",
  "                this.obj.form.errorDetected = false;",
  "            }",
  "        },",
  "",
  "        saved(val) {",
  "            if(val) {",
  "                this.saveLoader = false;",
  "                this.dialog = false;",
  "                this.obj.saved = false;",
  "",
  "                // this.get();",
  "            }",
  "        },",
  "    },",
  "    ",
  "    methods: {",
  "        initialise() {",
  "            // this.get();",
  "        },",
  "",
  "        get(page = null) {",
  "            this.saveLoader = true;",
  "            this.obj.get(page)",
  "        },",
  "    },",
  "    ",
  "    mounted() {",
  "        this.initialise();",
  "    },",
  "}",
  "</script>",
  ""
  ],
  "description": "Generate Lexx Vue Template"
}

lexx-vuetify-autocomplete.json

"Lexx Vuetify Autocomplete": {
  "prefix": "lexxVuetifyAutocomplete",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
    "<v-autocomplete",
    "    v-model=\"obj.$1\"",
    "    :items=\"$2\"",
    "    :error=\"errors.has('$3')\"",
    "    :hint=\"errors.get('$3')\" persistent-hint",
    "    @change=\"errors.clear('$3')\"",
    "    label=\"$4\"",
    "    item-value=\"id\" item-text=\"name\"",
    "    class=\"mr-2\"",
    ">",
    "</v-autocomplete>"
  ],
  "description": "Lexx Vuetify Autocomplete"
}

lexx-vuetify-datatable.json

"Lexx Vuetify Datatable": {
  "prefix": "lexxVuetifyDatatable",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
  "<div v-if=\"list && list.data\">",
  "",
  "    <v-data-table",
  "            :headers=\"list.headers\"",
  "            :items=\"list.data\"",
  "            :loading=\"saveLoader\"",
  "            :search=\"search\"",
  "            disable-initial-sort",
  "    >",
  "        <template v-slot:items=\"props\">",
  "            <td>",
  "                <span>{{ props.item.id }}</span>",
  "            </td>",
  "        </template>",
  "    </v-data-table>",
  "",
  "    <!-- pagination -->",
  "    <v-layout wrap row class=\"my-3 py-2 mx-1 px-3 elevation-3\" v-if=\"meta && links\">",
  "        <v-flex xs8 class=\"mt-3\">",
  "            Showing {{ meta.from }} to {{ meta.to }} of {{ meta.total }} records",
  "        </v-flex>",
  "",
  "        <v-flex xs3 class=\"text-xs-right\">",
  "            <v-tooltip bottom>",
  "                <v-btn icon @click=\"navigate(links.prev)\" slot=\"activator\">",
  "                    <v-icon>chevron_left</v-icon>",
  "                </v-btn>",
  "                <span>Previous Page</span>",
  "            </v-tooltip>",
  "",
  "            <v-tooltip bottom>",
  "                <v-btn icon @click=\"navigate(links.next)\" slot=\"activator\">",
  "                    <v-icon>chevron_right</v-icon>",
  "                </v-btn>",
  "                <span>Next Page</span>",
  "            </v-tooltip>",
  "        </v-flex>",
  "    </v-layout>",
  "",
  "",
  "</div>"
  ],
  "description": "Lexx Vuetify Datatable"
}

lexx-vuetify-modal.json

"Lexx Vuetify Modal": {
  "prefix": "lexxVuetifyModal",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
    "<v-dialog v-model=\"dialog\" max-width=\"70%\" persistent>",
    "    <v-card v-if=\"$1\">",
    "        <v-card-title primary-title class=\"blue\">",
    "            <div>",
    "                <p class=\"title\">Title</p>",
    "            </div>",
    "",
    "            <v-spacer></v-spacer>",
    "",
    "            <v-btn fab color=\"transparent\" dark small @click=\"close()\">",
    "                <v-icon>close</v-icon>",
    "            </v-btn>",
    "        </v-card-title>",
    "",
    "        <v-card-text>",
    "",
    "             $2",
    "",
    "        </v-card-text>",
    "",
    "        <v-card-actions>",
    "            <v-spacer></v-spacer>",
    "            <v-btn color=\"blue\" flat @click=\"close()\">Close</v-btn>",
    "        </v-card-actions>",
    "    </v-card>",
    "",
    "    <v-alert v-else :value=\"true\" type=\"error\" outline>",
    "        No $1 selected",
    "    </v-alert>",
    "</v-dialog>"
  ],
  "description": "Lexx Vuetify Modal"
}

lexx-vuetify-select.json

"Lexx Vuetify Select": {
  "prefix": "lexxVuetifySelect",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
    "<v-select",
    "    v-model=\"obj.$1\"",
    "    :items=\"$2\"",
    "    :error=\"errors.has('$3')\"",
    "    :hint=\"errors.get('$3')\" persistent-hint",
    "    @change=\"errors.clear('$3')\"",
    "    label=\"$4\"",
    "    item-value=\"id\" item-text=\"name\"",
    "    class=\"mr-2\"",
    ">",
    "</v-select>"
  ],
  "description": "Lexx Vuetify Select"
}

lexx-vuetify-stepper.json

"Lexx Vuetify Stepper": {
  "prefix": "lexxVuetifyStepper",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
  "<v-stepper v-model=\"stepper\">",
  "",
  "    <v-stepper-header>",
  "        <v-stepper-step :complete=\"stepper > 1\" step=\"1\">Sample Details</v-stepper-step>",
  "",
  "        <v-divider></v-divider>",
  "",
  "        <v-stepper-step :complete=\"stepper > 2\" step=\"2\">Upload Files</v-stepper-step>",
  "",
  "        <v-divider></v-divider>",
  "",
  "        <v-stepper-step step=\"3\">Preview Sample</v-stepper-step>",
  "    </v-stepper-header>",
  "",
  "    <v-stepper-items>",
  "        <v-stepper-content step=\"1\">",
  "        </v-stepper-content>",
  "",
  "        <v-stepper-content step=\"2\">",
  "        </v-stepper-content>",
  "        ",
  "        <v-stepper-content step=\"3\">",
  "        </v-stepper-content>",
  "        ",
  "    </v-stepper-items>",
  "</v-stepper>"
  ],
  "description": "Lexx Vuetify Stepper"
}

lexx-vuetify-text-field.json

"Lexx Vuetify TextField": {
  "prefix": "lexxVuetifyTextField",
  "scope": "javascript,typescript,vue,vue-html,html",
  "body": [
    "<v-text-field v-model=\"obj.$1\"",
    "    label=\"$2\"",
    "    :error=\"errors.has('$2')\"",
    "    :hint=\"errors.get('$2')\" persistent-hint",
    "    @keyup=\"errors.clear('$2')\"",
    "></v-text-field>"
  ],
  "description": "Lexx Vuetify TextField"
}

Generated using Snippet Generator