#Vue

https://dev.to/rahulmishra117/vue-50ho
I want share a Data abc which is string in my one component to another component .Any Idea How to share that data.

Digital Clock using Vue 3 Composition API

https://dev.to/snehalk/digital-clock-using-vue-3-composition-api-5cmc
Hello Readers,
In this blog post we will see how can we create a digital clock using Vue 3 composition API. Composition API is a new feature added in Vue through which we can reuse the code in multiple vue component.
For more details about how to use composition API you can refer my previous blog. I providing a link - go through it for basic information about it.








What is Composition API in Vue 3
Snehal ・ Dec 23 '21 ・ 3 min read

#javascript
#codenewbie
#vue
#webdev




So let's start with main topic.
First we need to create a component named as DigitalClock.vue



<template>
<div class="flex h-screen">
<div class="w-full lg:w-1/4 m-auto p-7 shadow-lg shadow-pink-400 border-4 border-t-purple-600 border-r-pink-600 border-b-pink-600 border-l-indigo-600 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
<!-- <p class="font-bold text-white text-lg">{{ currentTime.toLocaleString() }}</p> -->
<p class="font-bold text-white pt-3 text-6xl">{{ currentTime.toLocaleTimeString() }}</p>
<p class="font-bold text-white text-sm mb-1 flex justify-end mr-3">{{ currentTime.toLocaleDateString() }}</p>
</div>
</div>
</template>
<script>
import { useCurrentTime } from "../composables/useCurrentTime";
export default {
name: "CurrentTimeExample",
setup() {
const { currentTime } = useCurrentTime();
console.log(currentTime.value);
return { currentTime };
},
};
</script>



In the above code we are calling useCurrentTime method from the useCurrentTime.js file where we are going to write our main logic using composition api and from that we will call a currentTime and return its value to the component.
To create a composition api's we will create a folder named as composables where we keep/create all composition api's.
As stated above create a folder named as composables in src folder and create js file as useCurrentTime.js. (src/composables/useCurrentTime.js)



import { ref, onBeforeUnmount } from "vue";
export const useCurrentTime = () => {
const currentTime = ref(new Date());
const updateCurrentTime = () => {
currentTime.value = new Date();
};
const updateTimeInterval = setInterval(updateCurrentTime, 1000);
onBeforeUnmount(() => {
clearInterval(updateTimeInterval);
});
return {
currentTime,
};
};


In above code we have created a const variable as currentTime which holds current Date and Time, and a method updateCurrentTime to update the current time. There is an another method called as updateTimeInterval which will update the time after given set of interval.

You can see a hook called as onBeforeUnmount() which will clear the currentTime when component is unmounted.

And the last thing is we are returning the current time, so wherever we have used/called this useCurrenttTime.js we will have the value.
In this way wherever we require the date n time we can reuse this code by simply importing it to the component.
You can also refer live demo in sandbox.



Happy Reading.. 🦄 🦁

Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router (2023)
Автор: Olaf Zander
Количество страниц: 296

#vue

В этой книге Vue 3 рассматривается с самых основ, включая компоненты и директивы, и постепенно переходит к более продвинутым темам, таким как маршрутизация, управление состоянием, веб-рабочие и автономное хранение. Начав с простой страницы, вы постепенно создадите полнофункциональное многопоточное, автономное и устанавливаемое прогрессивное веб-приложение.

К тому времени, когда вы закончите читать эту книгу по Vue, вы не только научитесь создавать приложения, но и поймете, как эффективно решать общие проблемы, применяя существующие паттерны проектирования. Обладая этими знаниями, вы сможете не изобретать велосипед для каждого проекта, а экономя время создавать программное обеспечение, адаптируемое к будущим изменениям.

Скачать книгу