💥 Vue3 Use Hooks

npm npm bundle size npm GitHub license

📚 Introduction

🚀 Example

📦 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

✨ 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>

✨ 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>

✨ 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: 'Imeldawhite@nr.com',
 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>

✨ 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>

✨ 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>

📄 License