Vue

vue3 with prismic

named router views

you can have multiple router-views at the same time

https://www.udemy.com/course/vuejs-2-the-complete-guide/learn/lecture/21879376#overview

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

Vue