How Do I Create Templates Using Vue JS And Laravel

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

Today we learn to create template Using Vuejs and laravel

How Do I Create Templates Using Vue JS And Laravel

Step 1:Install Node.js and install npm by visiting our site bajarangisoft
Step 2:Open resource/js/app.js file and delecare data in it.


require('./bootstrap');

window.Vue = require('vue');

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

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

const routes=[
    {
        path: '/example',
        component: example
    },
];


const router=new VueRouter({
    routes
});
const app = new Vue({
    el: '#app',
    router,
    data: {
        htmlcontent : "<div><h1>Vue Js Template</h1></div>",
        imgsrc : "https://cdn.hipwallpaper.com/i/6/72/l67GdU.jpg"
    },
});

Step 3.We will have to use v-html directive. The moment we assign v-html directive to the html element, VueJS knows that it has to output it as HTML content. Let’s add v-html directive in the .html file and see the difference.
and We get a broken image. To assign any attribute to HMTL tag, we need to use v-bind directive. Let’s add the src to the image with v-bind directive .We need to prefix the src with v-bind:src = ”imgsrc” and the name of the variable with src.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Vuejs auto reload digital clock</title>
    <link href="{{asset('css/app.css')}}" rel="stylesheet">
    <meta name="csrf-token" content="{{csrf_token()}}"/>
    <!-- Fonts -->


    <!-- Styles -->
    <style>
        html, body {
            color: black;
            font-family: 'Nunito', sans-serif;
            font-weight: 200;
            height: 100vh;
            margin: 0;
            background:white;

        }
        .title-title{
            font-size: 70px;
        }
        .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;
        }
        a {
            color: white;
            text-decoration: none;
            background-color: transparent;
        }
        a:hover {
            color: white;
            text-decoration: underline;
        }
    </style>
</head>
<body >
<div id="app">
    {{--        <example-component></example-component>--}}
    <nav class="navbar navbar-expand-lg navbar-light bg-dark">
        <div class="container">
            <a class="navbar-brand  text-white" href="#" style="font-size: 25px">Blog</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto text-white">
                    <li class="text-white">
                                                    <router-link to="/example">Example</router-link>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container mt-5">
        <div v-html = "htmlcontent"></div>
        <img v-bind:src = "imgsrc" width = "300" height = "250" />
        <router-view></router-view>
    </div>
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>

</html>

Step 4: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.
Step 5:Now we pass url in google chrome

http://localhost/blog/public/

Related Post