Make reusable v-card component Vue Js-CodePudding

I am using a v-card component inside a v-dialog box .

<v-dialog
        v-model="dialog3"
        transition="dialog-bottom-transition"
        max-width="600"
      >
        <v-card>
          <v-card-title >
            Print Record
          </v-card-title>
          <v-card-text>
            <v-checkbox
              v-model="includeAnnotations"
              label="Include Annotations"
              @change="deselectDisabled()"
            ></v-checkbox>

            <v-radio-group  v-model="annotationOption">
              <v-radio
                :value="embedIntoImage"
                label="Embedded Into Image"
                :disabled="includeAnnotations === false"
              ></v-radio>
              <v-radio
                :value="burnIntoImage"
                label="Burn Into Image"
                :disabled="includeAnnotations === false"
              ></v-radio>

              <v-checkbox
                
                v-model="maintainColor"
                label="Maintain Annotation Color "
                :disabled="
                  annotationOption === 0 || includeAnnotations === false
                "
              ></v-checkbox>
            </v-radio-group>

            <v-checkbox
              
              v-model="burnReduction"
              label="Burn Reduction"
            ></v-checkbox>
          </v-card-text>

          <v-divider></v-divider>
          <!--                -->
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn @click="onDownloadFile()">
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>

The v-card component is being used on many other places with exactly the same parameters , values etc. I want to make it reusable so i could define it in a single place and just call it. Need Help

CodePudding user response：

Create a component with your v-card and register it globally:

Vue.component('mycard', require('./components/my-card-component.vue').default);

Then you can use it wherever you want:

<v-dialog
    v-model="dialog3"
    transition="dialog-bottom-transition"
    max-width="600"
>
    <mycard></mycard>
</v-dialog>

See official doc: https://vuejs.org/v2/guide/components-registration.html