Basics Of Laravel And VUE JS

December 29, 2021
1:53 pm
No Comments

Laravel is a popular open-source framework developed by Taylor otwell for PHP. Laravel comes with powerful object relational management, packaging system with dedicated dependency manager and utility that aid in application deployment and maintenance. Laravel support the preset of bootstrap, VUI, and react as a front end. But most of the laravel based project I am using VUE JS as a front end.

Lets start with basics of Laravel as a back end and front end as VUE : –

1.Install the composer in your system if it’s not exist.
2. Open the command prompt and type composer create-project laravel/laravel myblog
3. Go your folder by changing directory from the command prompt cd foldername

4. Install the UI package composer require laravel/ui

5. Type the scaffolding php artisan ui vue

6. Now install node_module npm install be sure that node js is install in your system.

7. Now install npm install vue-loader

8. Now run npm run watch , while working in the front end this will help you to see the modification running in your browser. But be sure once your work is done then run npm run production for deployment.

9. Now open resources/js/components/ ExampleComponent.vue and change the text


<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                     Hello, Welcome to my blog.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script type="rocketlazyloadscript">
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

10. Now open resources/view/welcome.blade.php and add this line


<div id="app">
   <example-component></example-component>
</div>

<script type="rocketlazyloadscript" src="{{ asset('js/app.js') }}" defer></script>

11. You will see this in your browser