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

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

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

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

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