Posted By
Bajarangi soft ,
Posted On 16-09-2020
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 digital_clock
3.Install npm package for digital_clock project.click here to see the documentation.Install the dependencies in the local node_modules folder.
npm install
npm install moment --save
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
<!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: white;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
background-image: url({{asset("image/background.png")}});//save this image in any folder
background-repeat: no-repeat;
background-size: cover;
background-position: bottom;
}
.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;
}
</style>
</head>
<body >
<div id="app">//id which is declared in app.js file
<example-component></example-component>//view the example-component file
</div>
<script src="{{asset('js/app.js')}}"></script>
</body>
</html>
<template>
<div class="container">
<div id="wrapper" >
<br>
<p class="title-title text-center" >Vuejs auto reload digital clock </p>
<h1 class="text-black text-center">{{message}}</h1>
<p class="title-title is-3 text-center" v-text="currentdate"></p>
<p class="title-title is-3 text-center " v-text="currentday"></p>
<p class="title-title is-3 text-center " v-text="currentTime"></p>
</div>
</div>
</template>
<script>
var moment = require('moment');
export default {
mounted() {
console.log(' Sample component!!!!!!.')//check this output in console
},
data(){
return{
name:"admin",
message: 'Current Date and Time:',
currentTime: null,
currentdate:null,
currentday:null,
}
},
methods: {
updateCurrentTime() {
this.currentTime = moment().format('LTS');
this.currentdate = moment().format('DD-MM-YYYY ');
this.currentday = moment().format(' dddd');
}
},
created() {
this.currentTime = moment().format('LTS');
this.currentdate = moment().format('DD-MM-YYYY');
this.currentday = moment().format(' dddd');
setInterval(() => this.updateCurrentTime(), 1 * 1000);
}
// display date and time without refreshing page using vuejs and laravel
}
</script>
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.