<template> //You component contents goes here, only html. </template> <script> export default { name: "ComponentName", data(){ return { //Component Data example: true, foo: "bar" } }, created(){ //On Component created }, methods: { functionExample(){ //Basic Component method } } } </script> 

<template> <modal :show.sync="showModal"> <h2 slot="header">{{$t("change_password.title")}}</h2> <div slot="body"> //You component contents goes here, only html. </div> <div slot="footer" class="text-center"> </div> </modal> </template> <script> import Modal from './interface/Modal.vue' export default { name: "ComponentName", components: { Modal }, data(){ return { //Component Data showModal: false, } }, created(){ //On Component created this.showModal = true; }, methods: { functionExample(){ //Basic Component method } } } </script>