Home Northwind

miércoles, 22 de julio de 2020

Instalar moment en Laravel & vue

Publicadas por Carlos Juan a la/s 9:16 p.m. Etiquetas:

Instalando Moment


Paso 1 - Nuevo proyecto / Ejecutar proyect 
laravel new test_fechas
cd test_fechas
php artisan serve

Paso 2: Instalar Vue (en otra ventana) 
cd test_fechas
composer require laravel/ui
php artisan ui vue
Paso 3 : Instalar moment 
npm install
npm install --save vue-moment
npm run watch

Paso 3: Configurando moment
En archivo resources/js/app.js arriba de la seccion app agregamos. 
/* moment */
import moment from 'moment'
import 'moment/locale/es';
Vue.prototype.moment = moment
Vue.use(require('vue-moment'));

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

Paso 4: Testing Moment
Abrimos el archivo resources/js/components/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">
                        {{moment(fecha).format('dddd, Do MMMM YYYY, h:mm:ss a')}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },
        data(){
            return {
                fecha: new Date()
            }
        },
    }
</script>

Paso 5: Desplegando el Componente Para este ejemplo vamos a reemplazar la vista resources/views/welcome.blade.php con el siguiente contenido. 
<!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>
        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>

    </head>
    <body>
        <div id="app">
            <example-component></example-component>
        </div>
    </body>
</html>

Resultado final


 

No hay comentarios.:

Publicar un comentario

Suscribirse a: Comentarios de la entrada (Atom)