Getting Started

Development Mode

Demo blocks can be enabled by turning on Development mode at /admin/config/services/pdb-vue.

Development mode also uses the un-minified version of Vue so that Vue Devtools can be used.

Creating your first block

Create a "vue_blocks" directory for components

In either a theme or a module, create a directory called "vue_blocks". This directory will contain all of the blocks you will create. (Actually, this can be named whatever you want.)

First block

In the "vue_blocks" directory, create a new directory named off of the new block name such as "my_new_block".

Next, add a .info.yml file (like when creating a Drupal module) and a javascript file.

vue_blocks
  my_new_block
    - my_new_block.info.yml
    - my_new_block.js

info.yml file options

name: My New Block
machine_name: my-new-block
type: pdb
description: 'Example block to demonstrate a .info.yml file.'
category: Vue
presentation: vue
add_js:
  footer:
    'js/my_new_block.js': {}
libraries:
  - pdb_vue/vue3.pinia
configuration:
  example_field:
    type: textfield
    default_value: test

• machine_name: This is the official internal name of the block and will be used to become the component directive if using components.
• add_js: First specify "footer" or "header" (footer is recommended) for where the javascript file will be located. Next specify the location and name of the javascript file where the Vue code will be held.
• template: Add the location of where an html template is located so that it can be used with Vue.js. See vue3_example_2 for reference.
• component: Pass a value of "True" if the block is to be used as a Vue.js Component.
• libraries: Add a list of css/js libraries already registered in Drupal such as pdb_vue/vue3.pinia. This is useful for when other dependencies are needed such as an ajax library like as Axios.

• configuration: Allows a list of fields to be passed in which will appear on the block configuration page for editors. The values set in the block configuration page will be passed to the drupalSettings global Javascript variable.