Skip to content

Instantly share code, notes, and snippets.

Avatar

Caio Vinicius caio-2k

  • Brazil
View GitHub Profile
@caio-2k
caio-2k / checkSlot.vue
Last active Jun 30, 2022
Check if a named slot is empty in VueJS
View checkSlot.vue
<template>
<div>
<nav
v-if="slots.myNamedSlot"
>
<slot name="myNamedSlot" />
</nav>
</div>
</template>
@caio-2k
caio-2k / ElementDatePicker.vue
Created May 5, 2022
My Element UI Date Picker Range in Vue 3
View ElementDatePicker.vue
<template>
<div>
<Calendar
size="mini"
v-model="myDate"
:type="dataExibitionTime === 'monthly' ? 'monthrange' : dataExibitionTime === 'yearly' ? 'monthrange' : 'daterange'"
@change="setRangeDate(); someFunction(param)"
/>
</div>
</template>
@caio-2k
caio-2k / reRenderComponent.vue
Created May 3, 2022
How to re-render an component using Vue 3 w/ Composition API
View reRenderComponent.vue
<template>
<my-component :key="componentKey" />
<button @click="forceRerender">Re-render component</button>
</template>
<script setup>
import { ref } from 'vue'
import myComponent from '@/components/myComponent.vue'
// constant that'll carry our component key to be re-rendered
@caio-2k
caio-2k / el-date-picker.vue
Created Mar 18, 2022
el-date-picker component (Element UI)
View el-date-picker.vue
<template>
// Component attrs
<el-date-picker
:size="props.size"
:modelValue="props.modelValue"
@change="onChange"
@update:modelValue="handleUpdate($event, value)"
:type="props.type"
range-separator="-"
@caio-2k
caio-2k / v-model-emit.vue
Created Mar 18, 2022
V-Model usage inside <script setup> and emit
View v-model-emit.vue
<template>
<input
class="input"
type="text"
:placeholder="props.label"
:value="props.modelValue"
v-on:input="updateValue($event.target.value)"
/>
</template>
@caio-2k
caio-2k / v-model.vue
Created Mar 18, 2022
V-Model usage with <script setup> and computed
View v-model.vue
<template>
<div>
<input v-model="model">
</div>
</template>
<script setup>
import { computed } from 'vue'
const props = defineProps({
@caio-2k
caio-2k / date-picker.vue
Created Mar 18, 2022
Date Picker (V-Calendar) Component
View date-picker.vue
<template>
<DatePicker
v-model="range"
:model-config="modelConfig"
:startDate="startDate"
:endDate="endDate"
is-range
is-required
color="green"
>
@caio-2k
caio-2k / dataToParent.vue
Created Feb 2, 2022
Watch + Emit - Vue 3 (C.A)
View dataToParent.vue
// first of all: props are for parent -> child and we can use emit for child -> parent
// parent-component.vue
<card-stats
@goalReachedPercentage="getReachedGoalValue"
/>
const getReachedGoalValue = (percent) => {
datas.indicatorGoalPercentage.push(percent)
@caio-2k
caio-2k / torefs.vue
Created Jan 13, 2022
Vue 3 toRefs in script setup use case
View torefs.vue
const searchEntities = ref('')
const searchActions = ref('')
const loadingTable = ref(false)
const loadingRegister = ref(false)
const singleTable = ref(null)
const newEntity = ref(false)
const entityName = ref('')
const newAction = ref(false)
const actionName = ref('')
View multiselect-tags.vue
const multiValue = ref()
const groups = reactive([])
groups = datas.roles.map((item) => ({
value: item.name,
label: item.name,
}))
<p>{{ multiValue }}</p>
<multiselect