Laravel Vuejs template Best Practices Part 2

Hello to all, welcome to therichpost.com. In this post, I will continue with Laravel Vuejs template Best Practices Part 2.

Here you can see the part first of this post and you just need to add some code in first part of laravel vuejs template to add chart js in it.

https://therichpost.com/laravel-vuejs-template-best-practices

In this post, I will implement chartjs in vuejs.

Here is the working picture:

Here are coding steps need to follow:

1. Very first, you need to follow below link and understand complete Laravel Vuejs template Best Practices:

After got the code from below link, you just need to edit or update  the files( Laravel Vuejs template Best Practices ) with this post( Laravel Vuejs template Best Practices Part 2 ) code:

https://therichpost.com/laravel-vuejs-template-best-practices

2. After understand above reference link, you need to run below command to add chart js package into your laravel vue application:

npm i vue-chartjs

3. Update you resources/js/app.js file with below code:

This file in https://therichpost.com/laravel-vuejs-template-best-practices:

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
import {Bar} from 'vue-chartjs';

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app'
});

4. Update your resources/js/components/ExampleComponent.vue file with below code :

This file in https://therichpost.com/laravel-vuejs-template-best-practices:

<template>
        <b-container>
        <b-jumbotron >
          <Header></Header> 
          <p>For more information visit our website</p>
        </b-jumbotron>
            <b-row>
                <b-col md="2">
                    
                    <navbar></navbar> 
                </b-col>
                <b-col md="4">
                <canvas ref="chart"></canvas>
                </b-col>
                <b-col md="6" class="content">
                    Home Page Text...Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                </b-col>
            </b-row>
            <b-card-footer class="text-center"><Footer></Footer></b-card-footer>
            
        </b-container>
</template>

<script>
    import Nav from './layouts/nav.vue';
    import Header from './layouts/header.vue';
    import Footer from './layouts/footer.vue';
    export default{
        components: {
            navbar: Nav,
            Header: Header,
            Footer: Footer
        },
        mounted() {
        var chart = this.$refs.chart;
            var ctx = chart.getContext("2d");
            var myChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['January', 'February', 'March', 'April'],
 
                    datasets: [{
                        label: '# of Votes',
                        data: [40, 20, 12, 39],
                        backgroundColor: [
                            'rgba(255, 99, 132, 0.2)',
                            'rgba(54, 162, 235, 0.2)',
                            'rgba(255, 206, 86, 0.2)',
                            'rgba(75, 192, 192, 0.2)',
                            'rgba(153, 102, 255, 0.2)',
                            'rgba(255, 159, 64, 0.2)'
                        ],
                        borderColor: [
                            'rgba(255,99,132,1)',
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(153, 102, 255, 1)',
                            'rgba(255, 159, 64, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        yAxes: [{
                            ticks: {
                                beginAtZero: true
                            }
                        }]
                    }
                }
            });
       
        }
    }
</script>

5.  Now run below command into your terminal and enjoy the Laravel Vuejs template Best Practices:

php artisan serve

This is it. If you have any query related to this post then please do comment below or ask question.

Thank you,

Jatt,

TheRichPost

Notes: The main purpose of this post is just give simple introduction Vue template structure. I just made this my requirement and share your views on this.