Vue Components

Vue allows the use of components which are ideal for reuse. Using components requires a global Vue instance in order to render all components.

Enabling "Single Page App" mode

Go to /admin/config/services/pdb-vue and check the box to "Use Vue components in a Single Page App format." This will then present a text field where you can define the element which the vue instance will attach itself to. By default it uses the #page-wrapper provided by the Classy theme.

By enabling this mode, a vue3.spa-init.js javascript file will be added after all components, thus rendering them.

Finally, each component needs to specify that it is a Vue component in the *.info.yml file.

component: true

App Instance

Vue 3 requires that components be added to an app instance using createApp(). This has already been done and assigned to a vueApp variable.

// Already created in the vue3.spa-create.js file.
const vueApp = Vue.createApp({});

Use the vueApp variable to attach components.

vueApp.component();

Passing block configuration settings as component properties

Each block can be set up to allow a user to add settings which will be passed into a component as Props.

To add fields to the block configuration, add them to the *.info.yml file.

configuration:
  fieldName:
    type: textfield
    default_value: 'I am a default value'

Then in the Vue component just add props for those fields.

props: ['fieldName']

To convert fieldName to be usable in Vue:

data: function () {
    return {
      message: 'Hello! You can now use this variable in your Vue component'
    };
  },
  mounted: function () {
    if (this.textField) {
      this.message = this.textField;
    }
  }

Getting the instance ID

Each component is automatically passed an instance-id prop. This can be accessed in the Vue instance by just adding the camelCase name into props.

props: ['fieldName', 'instanceId']

With the Instance ID, raw settings for that block instance can now be accessed from drupalSettings.pdb.configuration[this.instanceId].

Slots

Currently the use of Slots in top level components is not possible. This means that when a block is added and configured, that configuration will only pass as Props. However, there is no reason that the top level component can't just be a wrapper that then passes the content of those props into a child component which implements slots.