clear
  • Introduction
  • HTML
  • Html Structure
    • Header
    • Left Side Menu
    • Right Side Menu
    • Main Content
      • Buttons
      • Font Icons
      • Progress Bars
      • Maps
      • Lock Screen
  • FAQ's
  • SCSS
  • CSS Files
  • Javascript Files
  • Plugins
  • Start New Page
    • Menu Bar Fold
    • Boxed and Moveable Header
    • Moveable Header
    • Boxed and Fixed Header
    • Fixed Header and Menu
  • Vue Version
    • Basic Installation
      • Clear 1.7 installation
    • Basic Structure
      • Layout structure
      • Leftmenu structure
      • Start New Page
      • Changing layouts
  • Changing Color Scheme
  • Laravel Spark Skin
    • Spark Installation
    • Using .vue files
    • Adding External Plugins
  • Laravel Version
    • Changing skin
    • Changing Layouts
Powered by GitBook
On this page

Was this helpful?

  1. Vue Version
  2. Basic Structure

Start New Page

Open the blank.vue file in /src/components folder.

It has the following structure:

<template>
    <div>
    </div>
</template>
<script>
import Vue from "vue";

export default {
    // ===Component name
    name: "blank",
    // ===Components used by this component
    components: {},
    // ===Code to be executed when Component is mounted
    mounted() {},
    // ===Computed properties for the component
    computed: {},
    // ===Component data
    data() {
        return {

        }
    },
    // ===Component methods
    methods: {

    }
}
</script>
<!-- styles -->
<!-- adding scoped attribute will only apply the css to this component only -->
<style scoped></style>

Place your html content inside the div in template.

Note: Each template must only have one root element.

Then give the name of your component in the name value and your javascript in the appropriate lifecycle hook.

Then give the appropriate route in main.js routes section. If needed add the component path to left-side menu.

PreviousLeftmenu structureNextChanging layouts

Last updated 5 years ago

Was this helpful?