How to Create and Use Component in Vue JS Cli?

You can learn how to create own component in vue npm. we will use vue cli to create vue js setup and then we will create own custom component in vue js. you can simply create vue cli component with laravel or codeigniter app.

We will learn from scratch to create vue component. so first we will create vue js project using vue cli. then we will create Exmaple.vue component and import Example component in app. So let's see bellow steps:

Create Vue Project

vue create my-vue-library 

Create Vue Component

src/components/Example.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">My Example</div>
                    <div class="card-body">
                        Welcome to ItSolutionStuff.com
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Update App.vue

src/App.vue

<template>
  <div id="app">
    <Example></Example>
  </div>
</template> 
  
<script>
import Example from './components/Example.vue'
   
export default {
  name: 'app',
  components: {
    Example
  }
}
</script>

I hope it can help you...