vue
vue3 with prismic
- https://www.youtube.com/watch?v=Yd2V-bRBl-o
-
scroll behaviour
- https://www.udemy.com/course/vuejs-2-the-complete-guide/learn/lecture/21879382#overview
named router views
you can have multiple router-views at the same time
catchAll route
{ path: '/:notFoundOrCatchAllOrAnyOtherText(.*)', redirect: '/' }
redirect route
routes: [
{ path: '/', redirect: '/teams' },
{ path: '/teams', component: TeamsList },
or with alias (but url doesn't change)
routes: [
{ path: '/teams', component: TeamsList, alias:'/' },
watch the route updating
watch: {
$route(newRoute) {
console.log(newRoute)
this.teamId=newRoute.params.teamId
},
teamId(newId) {
console.log('teamId changed?',newId)
this.loadTeamMembers(newId);
},
},
vue-router
npm i --save vue-router
v-model on own component
add this to the component
{
props: [ "modelValue"],
emits: [ "update:modelValue" ],
methods: {
activateButton(opt) {
this.$emit('update:modelValue', opt);
},
},
}
usage:
<your-component v-model="rating"></your-component>
TheHeader and other components prefixed with The
when you have a component that is only used once it is recommemended (see vue styleguide) to prefix it with 'The'
multiple elements in directly in template
in vue3 (not in vue2) you don't need a root element in a template. you can use a <h2>
and a <p>
directly in the <template>
without wrapping them with a <div>
or something. this is a feature called fragments.
teleport
wrap a custom dialog with <teleport to='body'>
to teleport for the dialog from a component to the body.
dynamic components with keep-alive
when using keep-alive
vue keeps data and won't destroy it when changing component:is
<keep-alive>
<component :is="selectedComponent">hoi</component>
</keep-alive>
slot props
slot props pass data from a component to the parent of the component. this way you can have a v-for in a component and have the parent use the data and pass in custom styling/data.
the component:
<template>
<ul>
<li v-for="goal in goals" :key="goal">
<slot :myItem="goal" another-prop="..."></slot>
</li>
</ul>
</template>
the parent:
<the-component>
<template #default="slotProps">
<h2>{{slotProps.myItem}}
</template
</the-component>
slots
<template v-slot:header>
can be replaced with <template #header></template>
"export 'App' was not found in './App.vue'
make sure you don't have { } around App at import. It should be like this:
import App from "./App.vue";
quickstart
https://ej2.syncfusion.com/vue/documentation/treegrid/getting-started/
npm install -g @vue/cli
npm install -g @vue/cli-init
vue init webpack-simple quickstart
cd quickstart
npm install
#...