| difficulty | 3 |
|---|---|
| tags | pinia, state |
Lorem Ipsum?
Alpha
| // server/api/currentDate | |
| import { stringify } from "devalue" | |
| export default defineEventHandler(async (event) => { | |
| const data = { | |
| createAt: new Date(), | |
| } | |
| if (getHeader(event, 'Content-Type') === 'application/devalue') { | |
| const dataToJSON = { |
| import { ref, watch, readonly } from 'vue'; | |
| export const useRefDebounced = (aRef, ms) => { | |
| const debouncedRef = ref(aRef.value); | |
| // use the debounce function defined below to return a debounced ref whose value only syncs with `aRef` after `ms` milliseconds | |
| const debouncedUpdate = debounce(() => { | |
| debouncedRef.value = aRef.value; | |
| }, ms); | |
| watch(aRef, debouncedUpdate); |
| WEBVTT | |
| 00:00:04.553 --> 00:00:08.567 | |
| Congratulations on completing our course | |
| in test-driven development | |
| 00:00:08.600 --> 00:00:10.600 | |
| with Vue and TypeScript. | |
| 00:00:11.000 --> 00:00:13.267 |
| import { ref } from "vue"; | |
| export const useFetch = (url) => { | |
| const loading = ref(true); | |
| const data = ref(null); | |
| async function fetchData() { | |
| const res = await fetch(url); | |
| const d = await res.json(); | |
| data.value = d; | |
| loading.value = false; |
| <script setup> | |
| import { ref, computed } from "vue"; | |
| import ProductCard from "./components/ProductCard.vue"; | |
| import { useFetch } from "./composables/useFetch"; | |
| // loading products | |
| const { data, loading } = useFetch( | |
| "https://dummyjson.com/products?limit=10000" | |
| ); | |
| const products = computed(() => data.value?.products || []); |
| { | |
| "tables": [ | |
| { | |
| "id": "62757cc0e3b8400009599e54", | |
| "name": "Boards", | |
| "displayName": "boards", | |
| "isSystem": false, | |
| "fields": [ | |
| { | |
| "id": "62757cc0e3b8400009599e5e", |
| dynamic-link-screenshare |
| amiralizadeh9480.laravel-extra-intellisense | |
| antfu.iconify | |
| apollographql.vscode-apollo | |
| atlassian.atlascode | |
| be5invis.toml | |
| bierner.markdown-preview-github-styles | |
| bradlc.vscode-tailwindcss | |
| buenon.scratchpads | |
| csstools.postcss | |
| dbaeumer.vscode-eslint |