Vue.js Library

This module provides the Vue.js library as a Drupal library. It is compatible with both Vue 2 and 3 and comes with additional support for petite-vue.

This module does nothing on its own. There is no need to install this module unless another module requires its generated library definitions.

Vue library loading

Via CDN

1. Navigate to the admin/config/development/vuejs page.
2. Set the installation type to "Use an external CDN".
3. Select your preferred provider and Version.

Via local library installation using Composer Merge Plugin (Vue 3 only)

1. Install the composer merge-plugin via composer require wikimedia/composer-merge-plugin
2. Add the following entry in your composer.json:
   

   "merge-plugin": {
       "include": [
           "web/modules/contrib/vuejs/composer.libraries.json"
       ]
   },
   

3. Update the vuejs module via composer: composer update 'drupal/vuejs'
4. Navigate to the admin/config/development/vue page.
5. Set the installation type to "Local library".
6. Set the library path to /package/dist/vue.runtime.global.prod.js if not already defined so.

Via local library installation using manual download

Vue 3

1. Download https://registry.npmjs.org/vue/-/vue-3.5.13.tgz
2. Extract the tar inside the drupal libraries/vue folder.
3. Navigate to the admin/config/development/vuejs page.
4. Set the installation type to "Local library".
5. Set the library path to /libraries/vue/package/dist/vue.runtime.global.prod.js if not already defined so.

Vue 2

1. Download https://registry.npmjs.org/vue/-/vue-2.7.16.tgz
2. Extract the tar inside the Drupal libraries/vue folder.
3. Navigate to the admin/config/development/vuejs page.
4. Set the installation type to "Local library".
5. Set the library path to /libraries/vue/package/dist/vue.min.js if not already defined so.

USAGE

1. You can use it inside Twig templates as usual, for example:
   

   {{ attach_library('vuejs/vue') }}
   

2. You can attach it programmatically:
   

   function MYMODULE_page_attachments(array &$attachments) {
     $attachments['#attached']['library'][] = 'vuejs/vue';
   }
   

3. You can add it as a dependency inside your *.libraries.yml:
   

   dependencies:
     - vuejs/vue
   

Petite vue

Library installation via manual download

1. Download https://registry.npmjs.org/petite-vue/-/petite-vue-0.4.1.tgz
2. Extract the tar inside the drupal libraries/petitevue folder.
3. Navigate to the admin/config/development/vuejs page.
4. Set the installation type to "Local library".
5. Set the library path to /libraries/petitevue/package/dist/petite-vue.iife.js if not already defined so.

Library Installation via CDN

1. Navigate to the admin/config/development/vuejs page.
2. Set the installation type to "Use an external CDN".
3. Select your preferred provider and Version.

USAGE

1. You can use it inside Twig templates as usual, for example:
   

   {{ attach_library('vuejs/petitevue') }}
   

2. You can attach it programmatically:
   

   function MYMODULE_page_attachments(array &$attachments) {
     $attachments['#attached']['library'][] = 'vuejs/petitevue';
   }
   

3. You can add it as a dependency inside your *.libraries.yml:
   

   dependencies:
     - vuejs/petitevue