.js

// Would be great if Vetur could use the PascalCased file name by default,
// which is what the Vue devtools do through the `__filename` property
// added to processed SFCs.
name: 'AppModal',
// A description of the component itself, which could also be displayed in the
// devtools, to provide extra context when browsing a complex component tree.
description: 'A generic, scrollable modal for forms and longer-form content',
// Whether more than a single instance of the component can exist. For example,
// if the component contains an element with a hard-coded `id`, more than
// one instance would produce invalid HTML. This could be used not only by Vetur,
// but also by Vue itself to display a warning.
reusable: true,
props: {
  width: {
    // Prop descriptions could be used not only by editor integrations like
    // Vetur, but also by the Vue Devtools and in dev warnings (e.g. when
    // a custom validator fails). 
    description: 'Maximum width of the modal, as a percentage of the total width'
    type: Number,
    default: 80,
    // When a custom validator fails in development, Vue could provide the 
    // description of the prop for extra context. For example, in this case,
    // it's very possible that someone might provide something like `600`,
    // thinking that it's a pixel-based width.
    validator (value) {
      return value > 0 && value <= 100
    }
  },
},
events: {
  close: {
    // These descriptions for emitted events could be displayed in Vue's 
    // devtools as well - and also perhaps be included in a warning when
    // a listener for this event throws an error.
    description: 'The user has pressed the close button.',
    // When `null` is specified, it indicates the absence of arguments. If 
    // arguments is `undefined`, it means the user hasn't specified whether or
    // not arguments are attached to this event.
    arguments: null
  },
  resize: {
    description: 'The user has initiated click-and-drag resizing.',
    // When arguments exist, we use an array instead of an object, because the
    // order is important. When we're using `Proxy`, we should even be able to
    // intercept undefined property errors and remind users of the details of
    // the argument they tried to access an undefined property on.
    arguments: [
      { 
        name: 'dimensions'
        description: 'The new dimensions of the modal.'
        type: Object
        // This is definitely a "wishlist" sort of idea, as I've often wanted
        // to be able to specify the shape of object props in Vue. I think it
        // might be especially helpful for Vetur though. The `shape` property
        // could work the same as `props`, since props are also an object.
        shape: {
          width: Number
        }
      }
    ]
  }
},
slots: {
  default: {
    description: 'The main content of the modal.',
    // This could facilitate linting and also allow Vue itself to
    // provide warnings when an expected slot is not provided.
    required: true
  },
  header: {
    description: 'The header displayed at the top of the modal. Its content is visually separated by the main content by a darker background color.'
  }
}