How to use render function in Vue3
try it. <script lang=”tsx” setup> import { h } from ‘vue’; const render = () => { return h(‘div’, []); }; const jsxNode = () => { return <div> text </div>; }; </script> <template> <render /> <jsxNode /> </template>
vue-composition-api
How to properly reset Vue Composition Api’s reactive values
You can use Object.assign: setup() { const initialState = { name: “”, lastName: “”, email: “” }; const form = reactive({ …initialState }); function resetForm() { Object.assign(form, initialState); } function setForm() { Object.assign(form, { name: “John”, lastName: “Doe”, email: “[email protected]” }); } return { form, setForm, resetForm }; } See it live on codesandbox credits: … Read more
Vue 3 Composition API – watchEffect vs. watch
What helped me to understand the difference between watch and watchEffect in Vue 3 was to think about watchEffect as computed with side-effects. The watchEffect() hook works like the computed() hook or the computed option, but instead of returning a value, you use it to trigger side-effects. Use watch whenever you want to trigger a … Read more
How to use router in vue composition api?
You can just do this: import { useRoute } from ‘vue-router’; export default { setup() { const route = useRoute(); // Now you can access params like: console.log(route.params.id); } };
Vue.js 3 – replace/update reactive object without losing reactivity
Though Boussadjra Brahim’s solution works its not the exact answer to the question. In the sense that reactive data can not be reassigned with = but there is a way to reassign the reactive data. It is Object.assign. Therefore this should work setup(){ const formData = reactive({}) onMounted(() => { fetchData().then((data) => { if (data) … Read more
How does Computed work in Vue 3 script setup?
In <template>: Getter only: {{ myVal }} <p v-text=”myVal” /> Getter and setter: <input v-model=”myVal”> Important: Do not use myVal.get() or myVal.set(value)! Use: getting: myVal setting (assignment): myVal = value In <script setup>: Getter only: const someReactiveRef = ref(null) const myVal = computed(() => someReactiveRef.value) Getter & setter: const someReactiveRef = ref(null) const myVal = … Read more
Strongly typing props of vue components using composition api and typescript typing system
Troy Kessier’s answer is not entirely accurate. I quote the documentation on definecomponent: Alternatively if your component does not use any option other than setup itself, you can pass the function directly […] So there are not two ways of declaring properties, but rather two ways of declaring a component, and each of them provides … Read more
can’t use template ref on component in vue 3 composition api
I ran into this issue today. The problem is that, when using the <script setup> pattern, none of the declared variables are returned. When you get a ref to the component, it’s just an empty object. The way to get around this is by using defineExpose in the setup block. // Child.vue <template> <div ref=”wrapper”> … Read more
How to type a computed property in the new composition API?
There are two different types for that. If your computed prop is readonly: const nameAndCountry: ComputedRef<string> = computed((): string => `The movie name is ${movieName.value} from ${country.value}`); if it has a setter method: const nameAndCountry: WritableComputedRef<string> = computed({ get(): string { return ‘somestring’ }, set(newValue: string): void { // set something }, });
Vue 3 Composition API data() function
Under the new Composition API, all of the variables that you previously defined in data() are just returned from your setup() function as normal variables with reactive values. For example, a Vue 2.0 component that had a data function like so: data() { return { foo: 1, bar: { name: “hi” } } } becomes … Read more