Advanced Stuff

Last updated on

14 June 2023

Bundlers

Bundlers allow you to use the full power of Vue. However, they are much trickier to implement with Drupal. Below are two examples that run the development in a seperate index.html outside of Drupal but then allow the finished bundle to be used inside of a block.

Vite

Vite is the latest bundler for Vue 3, but it assumes you are creating a pure javascript application. Thus, there is a lot of extra work to jump through to make its final bundle work with Drupal.

The vue3_vite block is an example of using Vite to create the final block's code. Pay special attention to the vite.config.ts file which removes file hashing and uses the external global Vue package provided by Drupal.

Be sure to set the base config in the vite.config.ts to the location of your pdb_vue component.

# Set your own path so assets will resolve correctly.
base: '/modules/contrib/pdb_vue/components/vue3_vite/dist/',

Vite builds bundles as ES Module packages so be sure to add the JS file as a type module.

add_js:
  footer:
    'dist/index.js': { attributes: { type: 'module'} }

Vue CLI and Webpack

For Vue 2, the vue_example_webpack block is an example of using the Vue CLI to generate single-file components using ES6 with Webpack.

Be sure to tell webpack that you are using an external version of Vue.js so that it doesn't load in a second version.

module.exports.externals = {
  "vue": "Vue"
}

State Management

Sharing information between components and block instances is a common need. This can be done simply with a Global Event Bus or with more advanced tools like Pinia.

Global Event Bus

You may only need to share simple data from instance to instance, in that case, you can use a Global Event Bus.

https://codepen.io/segovia94/pen/gOerNjK (Vue 3 - Reactivity API)
https://codepen.io/segovia94/pen/bGwzPzo (Vue 3 - Mitt library)
https://codepen.io/segovia94/pen/OJymQxy (Vue 2)

Pinia

For more robust state management, the Pinia library is included. Create your own Store file and be sure to add the pdb_vue/vue3.pinia library as a dependency of any blocks.

See the vue3_pinia_a and vue3_pinia_b example components to see how to use Pinia with multiple Vue 3 instances.

Using Pinia with multiple Vue 3 instances.