VueJS Tips & Tricks
Pequeños trucos y módulos a prueba de balas
Autenticación
<g-signin-button
:params="googleSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
LogIn
</g-signin-button>import Vue from 'vue'
import GSignInButton from 'vue-google-signin-button'
data () {
return {
googleSignInParams: {
client_id: process.env.GOOGLE_CLIENT_ID
},
authenticated: false,
user: '',
mail: '',
errors: [],
...
}
},methods: {
onSignInSuccess (googleUser) {
const profile = googleUser.getBasicProfile()
this.user = profile.ofa
this.mail = profile.U3
this.$router.push('rut')
},
onSignInError (error) {
this.errors = error
},
...
}<modal name="modal-log" width="80%" height="auto" :scrollable="true" @before-close="emptyLogData()"></modal>
<button class="button" @click="openModalLog(row.changes)">Ver cambios</button>import VModal from 'vue-js-modal'
Vue.use(VModal)
data () {
return {
currentlog: null,
...
}
},
methods: {
openModalLog: function (data) {
this.currentlog = data
this.$modal.show('modal-log')
},
}import swal from 'sweetalert2'
methods: {
logout: function () {
this.$swal({
title: '¿Estás seguro?',
text: 'Confirmando cerrarás tu sesión de usuario',
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Si',
cancelButtonText: 'Cancelar'
}).then(() => {
emptyData.removeStore(this, ['user', 'mail', 'permissions', 'rut'])
localStorage.clear()
this.$router.push('/')
}).catch(this.$swal.noop)
}
}Title & Meta tags
// router/index
import Meta from 'vue-meta'
Vue.use(Meta)metaInfo: {
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
title: 'Inicio Sesión',
titleTemplate: '%s | Empresa.cl',
link: [
{ rel: 'stylesheet', href: '/css/inicio-sesion.css' },
],
bodyAttrs: {
class: 'inicio-sesion'
}
} <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inicio Sesión | Empresa.cl</title>
<link rel="stylesheet" href="/css/inicio-sesion.css">
</head>
<body class="inicio-sesion">
<table-component
:data="log"
filterPlaceholder="Filtrar datos..."
filterNoResults="No se encontraron resultados."
>
<table-column show="date" label="Fecha" :formatter="formatDate"></table-column>
<table-column show="description" label="Descripción"></table-column>
</table-component>data () {
return {
log: null,
...
}
},
methods: {
getLog: function () {
this.log = []
axios.get('...')
.then(response => {
if (response.data.status) {
this.log = response.data.log
}
})
.catch(e => {
this.errors.push(e)
})
},
formatDate: function (date) {
if (date) {
return moment(date).format('DD/MM/YY HH:mm')
} else {
return ''
}
},
...
},
created: function () {
this.getLog()
}
Tabs
<tabs class="box-tabs">
<tab name="Ver Existente">
...
</tab>
...
</tabs>import Tabs from 'vue-tabs-component'
Vue.use(Tabs)
<file-upload
:post-action="postURL()"
extensions="pdf"
accept="application/pdf"
v-model="files"
ref="upload">
Select files
</file-upload>
<button type="button" class="button" v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">Subir archivo</button>import FileUpload from 'vue-upload-component'
Vue.use(FileUpload)
data () {
return {
files: [],
...
}
},
methods: {
postURL: function () {
return BASE_URL + '/upload'
},
...
}