vue3-use-hooks
v0.1.8
Published
vue3 use hooks
Downloads
49
Maintainers
Readme
:boom: Vue3 Use Hooks
:books: Introduction
Vue Use Hooks implemented as vue composition functions.
:rocket: Example
Check our 👉 example
:package: Installation
# install with yarn
yarn add vue3-use-hooks
# install with npm
npm install vue3-use-hooks
# install with pnpm
pnpm add vue3-use-hooks
:sparkles: useLocalStorage
<script setup lang="ts">
import { useLocalStorage } from 'vue3-use-hooks';
const { value, remove } = useLocalStorage('test', '1');
</script>
<template>
<div>
<p><b>Value is: </b> {{ value }}</p>
<button class="fourth" @click="value = '2'">Change</button>
<button class="first" @click="remove">Remove</button>
</div>
</template>
:sparkles: useState
<script setup lang="ts">
import { useState } from 'vue3-use-hooks';
const [count, setCount] = useState(0);
</script>
<template>
<div>
<p><b>Count: </b> {{ count }}</p>
<button class="fourth" @click="count - 1 >= 0 && setCount(count - 1)">Decrement</button>
<button class="fourth" @click="setCount(count + 1)">Increment</button>
</div>
</template>
:sparkles: useStringCase
<script setup lang="ts">
import { reactive } from 'vue';
import { useStringCase } from 'vue3-use-hooks';
const state = reactive({
name: 'imelda white',
gender: 'female',
company: 'NEUROCELL',
email: '[email protected]',
balance: '3,814.49',
about: 'Veniam fugiat pariatur adipisicing do consequat.',
address: 'bulwer place, lemoyne, district of columbia, 5597'
});
const { camelCase, kebabCase, pascalCase, upperCase, lowerCase, sentenceCase, capitalizeCase } =
useStringCase();
</script>
<template>
<div>
<p><b>CamelCase: </b>{{ camelCase(state.about) }}</p>
<p><b>CapitalizeCase: </b>{{ capitalizeCase(state.name) }}</p>
<p><b>SentenceCase: </b>{{ sentenceCase(state.company) }}</p>
<p><b>KebabCase: </b>{{ kebabCase(state.balance) }}</p>
<p><b>PascalCase: </b>{{ pascalCase(state.address) }}</p>
<p><b>LowerCase: </b>{{ lowerCase(state.email) }}</p>
<p><b>UpperCase: </b>{{ upperCase(state.gender) }}</p>
</div>
</template>
:sparkles: useEmbed
<script setup lang="ts">
import { ref } from 'vue';
import { useEmbed } from 'vue3-use-hooks';
const code = ref(null);
const { isEmbedBlock, clear } = useEmbed(code);
</script>
<template>
<div class="example-container">
<div class="flex-container">
<textarea rows="5" cols="50" placeholder="Place embed code here" v-model="code"></textarea>
<button type="button" class="clear-button" @click="clear">Clear</button>
</div>
<div v-if="isEmbedBlock" v-html="code" class="embed-block"></div>
</div>
</template>
:sparkles: useModal
<script setup lang="ts">
import { useModal } from 'vue3-use-hooks';
const contrubitors = [
{
id: 1,
emoji: '👨',
fullname: 'Abdulnasır Olcan',
programmer: 'Frontend Developer'
},
{
id: 2,
emoji: '👩',
fullname: 'Büşra Şanlıbayrak',
programmer: 'Frontend Developer'
},
{
id: 3,
emoji: '🧑',
fullname: 'Mehmet Varol',
programmer: 'Frontend Developer'
}
];
const { visible, setVisible, current, openModal, closeModal } = useModal();
const handleButton = () => {
openModal(contrubitors);
setVisible(true);
};
</script>
<template>
<div class="modal-vue">
<!-- button show -->
<button class="btn fourth" @click="handleButton">show model</button>
<!-- overlay -->
<div class="overlay" v-if="visible"></div>
<!-- modal -->
<div class="modal" v-if="visible">
<div class="modal-header">Modal Header</div>
<button class="close" @click="closeModal">x</button>
<div class="modal-content" v-for="contrubitor in current" :key="contrubitor.id">
<ul>
<li>
<p>{{ contrubitor.emoji }}</p>
<h1>{{ contrubitor.fullname }}</h1>
<span>{{ contrubitor.programmer }}</span>
</li>
</ul>
</div>
<div class="modal-footer">Modal Footer</div>
</div>
</div>
</template>