How To Create Side Nav bar Using VueJs and Laravel

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

In Vuejs we can include three file into one file for example we create header ,footer and example vue file and then we include this files in new vue file and only that file we include in app.js so we can access all file just by passing one vue file in app.js.so today we discuss how to do it.

How To Create Side Nav bar Using VueJs and Laravel

Let's learn

1.Install new laravel project to implement code. https://laravel.com/docs/5.8/installation

composer create-project --prefer-dist laravel/laravel blog

run above command in command prompt.

2.Install node.js package for blog project . click here to download it.
3.Install npm package for blog project.
click here to see the documentation.Install the dependencies in the local node_modules folder.

npm install

run above command in terminal.

4.Now we create header.vue file in blog/resources/js/components folder and implement code as below.
header.vue

<template>
    <nav id="sidebar" class="sidebar-wrapper">
        <div class="sidebar-content">
            <div class="sidebar-brand">
                <a href="#">Vuejs demo</a>
                <div id="close-sidebar" @click="closemenu">
                    <i class="fa fa-list"></i>
                </div>
            </div>
            <div class="sidebar-header">
                <div class="user-pic">
                    <img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg" alt="User picture">
                </div>
                <div class="user-info">
          <span class="user-name">admin
          </span>
                    <span class="user-role">Administrator</span>
                    <span class="user-status">
            <i class="fa fa-circle"></i>
            <span>Online</span>
          </span>
                </div>
            </div>
            <!-- sidebar-header  -->

            <!-- sidebar-search  -->
            <div class="sidebar-menu">
                <ul>
                    <li>
                        <router-link to="/example"><i class="fa fa-book"></i>
                            <span>example</span></router-link>
                    </li>
                </ul>
            </div>
            <!-- sidebar-menu  -->
        </div>
        <!-- sidebar-content  -->

    </nav>
</template>

<script>
    export default {
        methods:{
            closemenu(){
                $(".page-wrapper").removeClass("toggled");
            }
        },

    }
</script>

5.Now we create footer.vue file in blog/resources/js/components folder and implement code as below.
footer.vue
<template>
    <footer class="text-center bg-dark">
        <div class="mb-2">
            <small class="text-white">
                © 2020 made with <i class="fa fa-heart" style="color:red"></i>
            </small>
        </div>


    </footer>
</template>
<style scoped>
    footer{
        position: fixed;
        bottom: 0;
        width: 100%;
    }
</style>

6.Now implement code as below into ExampleComponent.vue 
<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">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

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

7.Now create welcome.vue file in blog/resources/js/components folder to include header and footer.vue file in it and also implement code to view examplecomponent.vue file content in welcome.vue file
welcome.vue
<template>
    <div class="page-wrapper chiller-theme toggled">
        <a id="show-sidebar" class="btn btn-sm btn-dark" href="#" @click="openmenu">
            <i class="fa fa-close"></i>
        </a>
        <addheader></addheader>

        <main class="page-content">

            <router-view/>
        </main>
        <addfooter></addfooter>
        <!-- page-content" -->
    </div>
    <!-- page-wrapper -->
</template>

<script>

    Vue.component('addheader',require('./header.vue').default);
    Vue.component('addfooter',require('./footer.vue').default);
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        methods:{
            openmenu(){
                $(".page-wrapper").addClass("toggled");
            }
        }
    }
</script>

8.Now we include welcome and example.vue file in app.js
require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Vue from 'vue';

const example = require('./components/ExampleComponent.vue').default;

const routes=[

    {
        path: '/',
        component: welcome,
        children: [
            {
                path: '/example',
                component: example
            },
           
        ]
    },



];
const router=new VueRouter({
    routes
});
const app = new Vue({
    el: '#app',
    router,
    data:{

    }
});

9.Now to display component file using welcome and home.blade.php files
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">

        <!-- Styles -->
        <style>
            html, body {
                background-color: #fff;
                color: #636b6f;
                font-family: 'Nunito', sans-serif;
                font-weight: 200;
                height: 100vh;
                margin: 0;
            }

            .full-height {
                height: 100vh;
            }

            .flex-center {
                align-items: center;
                display: flex;
                justify-content: center;
            }

            .position-ref {
                position: relative;
            }

            .top-right {
                position: absolute;
                right: 10px;
                top: 18px;
            }

            .content {
                text-align: center;
            }

            .title {
                font-size: 84px;
            }

            .links > a {
                color: #636b6f;
                padding: 0 25px;
                font-size: 13px;
                font-weight: 600;
                letter-spacing: .1rem;
                text-decoration: none;
                text-transform: uppercase;
            }

            .m-b-md {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
        <div class="flex-center position-ref full-height">
            @if (Route::has('login'))
                <div class="top-right links">
                    @auth
                        <a href="{{ url('/home') }}">Home</a>
                    @else
                        <a href="{{ route('login') }}">Login</a>

                        @if (Route::has('register'))
                            <a href="{{ route('register') }}">Register</a>
                        @endif
                    @endauth
                </div>
            @endif
    </body>
</html>

home.blade.php
@extends('layouts.app')

@section('content')
    <router-view></router-view>
@endsection
 

10.Run command npm run watch.

npm run dev  active and  updates only when you run command.
npm run watch does the same, but then it stays active and "watches" for updates.vue and .js files. If it detects a change so you can just refresh the page.


11.Now run below url in google chrome.

http://localhost/blog/public/

 

Related Post