diff --git a/web/modules/herodevs/herodevs_vue/README.md b/web/modules/herodevs/herodevs_vue/README.md
new file mode 100644
index 000000000..9ff9315b9
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/README.md
@@ -0,0 +1,3 @@
+# HeroDevs Vue Module
+
+Here is the perfect place to add more information about the module!
diff --git a/web/modules/herodevs/herodevs_vue/config/install/herodevs_vue.settings.yml b/web/modules/herodevs/herodevs_vue/config/install/herodevs_vue.settings.yml
new file mode 100644
index 000000000..2d69df83b
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/config/install/herodevs_vue.settings.yml
@@ -0,0 +1,3 @@
+herodevs_vue:
+  page_title: "Hero Devs Vue"
+  vue_cdn: "https://unpkg.com/vue@3/dist/vue.global.js"
diff --git a/web/modules/herodevs/herodevs_vue/config/schema/herodevs_vue.schema.yml b/web/modules/herodevs/herodevs_vue/config/schema/herodevs_vue.schema.yml
new file mode 100644
index 000000000..ef8517ec1
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/config/schema/herodevs_vue.schema.yml
@@ -0,0 +1,20 @@
+herodevs_vue.settings:
+  type: config_object
+  label: 'HeroDevs Vue settings'
+  mapping:
+    herodevs_vue:
+      type: mapping
+      mapping:
+        page_title:
+          type: text
+          label: 'HeroDevs Vue page title:'
+        source_text:
+          type: text
+          label: 'CDN link for Vue'
+block.settings.herodevs_vue_block:
+  type: block_settings
+  label: 'HeroDevs Vue block'
+  mapping:
+    herodevs_vue_block_settings:
+      type: text
+      label: 'HeroDevs Vue block settings'
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.info.yml b/web/modules/herodevs/herodevs_vue/herodevs_vue.info.yml
new file mode 100644
index 000000000..d3cf35655
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.info.yml
@@ -0,0 +1,8 @@
+name: Hero Devs Vue
+description: Creates an example page with CDN support of Vue 3
+package: custom
+
+type: module
+core_version_requirement: ^9.4 || ^10
+
+configure: herodevs_vue.admin
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.install b/web/modules/herodevs/herodevs_vue/herodevs_vue.install
new file mode 100644
index 000000000..9f1cbb7ec
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.install
@@ -0,0 +1,17 @@
+<?php
+
+/**
+ * @file
+ * Installation functions for HeroDevs Vue Module
+ */
+
+use Drupal\user\RoleInterface;
+
+/**
+ * Implements hook_install().
+ */
+function herodevs_vue_install() {
+  user_role_change_permissions(RoleInterface::ANONYMOUS_ID, array(
+    'HeroDevs Vue' => TRUE,
+  ));
+}
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.links.menu.yml b/web/modules/herodevs/herodevs_vue/herodevs_vue.links.menu.yml
new file mode 100644
index 000000000..f307b353c
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.links.menu.yml
@@ -0,0 +1,5 @@
+herodevs_vue.admin:
+  title: 'HeroDevs Vue settings'
+  description: 'Configure settings for the HeroDevs Vue module.'
+  route_name: herodevs_vue.admin
+  parent: 'system.admin_config_development'
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.module b/web/modules/herodevs/herodevs_vue/herodevs_vue.module
new file mode 100644
index 000000000..8da4c2c2f
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.module
@@ -0,0 +1,33 @@
+<?php
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function herodevs_vue_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    case 'help.page.herodevs_vue':
+      return t('
+        <h2>HeroDevs Vue 3 Integration for Drupal.</h2>
+        <h3>Instructions</h3>
+        <p>This is a demo Help Page!</p>
+      ');
+  }
+}
+
+/**
+ * Implements hook_theme().
+ */
+function herodevs_vue_theme($existing, $type, $theme, $path) {
+  $variables = [
+    'herodevs_vue' => [
+      'variables' => [
+        'vue_cdn' => NULL,
+      ],
+      'template' => 'herodevs_vue',
+    ],
+  ];
+  return $variables;
+}
+
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.permissions.yml b/web/modules/herodevs/herodevs_vue/herodevs_vue.permissions.yml
new file mode 100644
index 000000000..f90029d9f
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.permissions.yml
@@ -0,0 +1,3 @@
+HeroDevs Vue:
+  title: 'HeroDevs Vue module permission'
+  description: 'Grant users access to the HeroDevs Vue page'
diff --git a/web/modules/herodevs/herodevs_vue/herodevs_vue.routing.yml b/web/modules/herodevs/herodevs_vue/herodevs_vue.routing.yml
new file mode 100644
index 000000000..a53a71259
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/herodevs_vue.routing.yml
@@ -0,0 +1,14 @@
+herodevs_vue.home:
+  path: '/herodevs/home'
+  defaults:
+    _controller: '\Drupal\herodevs_vue\Controller\HeroDevsVueController::home'
+  requirements:
+    _permission: 'HeroDevs Vue'
+
+herodevs_vue.admin:
+  path: '/admin/config/development/herodevs_vue'
+  defaults:
+    _form: '\Drupal\herodevs_vue\Form\HeroDevsVueForm'
+    _title: 'HeroDevs Vue settings'
+  requirements:
+    _permission: 'administer site configuration'
diff --git a/web/modules/herodevs/herodevs_vue/src/Controller/HeroDevsVueController.php b/web/modules/herodevs/herodevs_vue/src/Controller/HeroDevsVueController.php
new file mode 100644
index 000000000..03d52d52a
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/src/Controller/HeroDevsVueController.php
@@ -0,0 +1,21 @@
+<?php
+namespace Drupal\herodevs_vue\Controller;
+
+use Drupal\Component\Utility\Html;
+
+class HeroDevsVueController{
+
+  public function home() {
+    // Default settings.
+    $config = \Drupal::config('herodevs_vue.settings');
+    // Page title and source text.
+    $page_title = $config->get('herodevs_vue.page_title');
+    $vue_cdn = $config->get('herodevs_vue.vue_cdn');
+
+    $element['#title'] = Html::escape($page_title);
+    $element['#vue_cdn'] = $vue_cdn;
+    $element['#theme'] = 'herodevs_vue';
+
+    return $element;
+  }
+}
diff --git a/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueBlockForm.php b/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueBlockForm.php
new file mode 100644
index 000000000..371dd684e
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueBlockForm.php
@@ -0,0 +1,79 @@
+<?php
+
+namespace Drupal\herodevs_vue\Form;
+
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Url;
+
+/**
+ * HeroDevs Vue block form
+ */
+class HeroDevsVueBlockForm extends FormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'herodevs_vue_block_form';
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    // How many paragraphs?
+    // $options = new array();
+    $options = array_combine(range(1, 10), range(1, 10));
+    $form['paragraphs'] = [
+      '#type' => 'select',
+      '#title' => $this->t('Paragraphs'),
+      '#options' => $options,
+      '#default_value' => 4,
+      '#description' => $this->t('How many?'),
+    ];
+
+    // How many phrases?
+    $form['phrases'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Phrases'),
+      '#default_value' => '20',
+      '#description' => $this->t('Maximum per paragraph'),
+    ];
+
+    // Submit.
+    $form['submit'] = [
+      '#type' => 'submit',
+      '#value' => $this->t('Generate'),
+    ];
+
+    return $form;
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    $phrases = $form_state->getValue('phrases');
+    if (!is_numeric($phrases)) {
+      $form_state->setErrorByName('phrases', $this->t('Please use a number.'));
+    }
+
+    if (floor($phrases) != $phrases) {
+      $form_state->setErrorByName('phrases', $this->t('No decimals, please.'));
+    }
+
+    if ($phrases < 1) {
+      $form_state->setErrorByName('phrases', $this->t('Please use a number greater than zero.'));
+    }
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $form_state->setRedirect('herodevs_vue.home', [
+      'paragraphs' => $form_state->getValue('paragraphs'),
+      'phrases' => $form_state->getValue('phrases'),
+    ]);
+  }
+
+}
diff --git a/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueForm.php b/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueForm.php
new file mode 100644
index 000000000..498cf5d5b
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/src/Form/HeroDevsVueForm.php
@@ -0,0 +1,69 @@
+<?php
+
+namespace Drupal\herodevs_vue\Form;
+
+use Drupal\Core\Form\ConfigFormBase;
+use Drupal\Core\Form\FormStateInterface;
+
+class HeroDevsVueForm extends ConfigFormBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'herodevs_vue_form';
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function buildForm(array $form, FormStateInterface $form_state) {
+    // Form constructor.
+    $form = parent::buildForm($form, $form_state);
+    // Default settings.
+    $config = $this->config('herodevs_vue.settings');
+
+    // Page title field.
+    $form['page_title'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('HeroDevs Vue Page Title:'),
+      '#default_value' => $config->get('herodevs_vue.page_title'),
+      '#description' => $this->t('Give your HeroDevs Vue page a title.'),
+    ];
+    // Source text field.
+    $form['vue_cdn'] = [
+      '#type' => 'textfield',
+      '#title' => $this->t('Vue CDN URL'),
+      '#default_value' => $config->get('herodevs_vue.vue_cdn'),
+      '#description' => $this->t('URL for Vue CDN used in the HeroDevs page'),
+    ];
+
+    return $form;
+  }
+
+  /**
+    * {@inheritdoc}
+    */
+   public function validateForm(array &$form, FormStateInterface $form_state) {
+
+   }
+
+     /**
+      * {@inheritdoc}
+      */
+     public function submitForm(array &$form, FormStateInterface $form_state) {
+       $config = $this->config('herodevs_vue.settings');
+       $config->set('herodevs_vue.vue_cdn', $form_state->getValue('vue_cdn'));
+       $config->set('herodevs_vue.page_title', $form_state->getValue('page_title'));
+       $config->save();
+       return parent::submitForm($form, $form_state);
+     }
+/**
+   * {@inheritdoc}
+   */
+  protected function getEditableConfigNames() {
+    return [
+      'herodevs_vue.settings',
+    ];
+  }
+}
diff --git a/web/modules/herodevs/herodevs_vue/src/Plugin/Block/HeroDevsVueBlock.php b/web/modules/herodevs/herodevs_vue/src/Plugin/Block/HeroDevsVueBlock.php
new file mode 100644
index 000000000..8cb9cddd9
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/src/Plugin/Block/HeroDevsVueBlock.php
@@ -0,0 +1,48 @@
+<?php
+
+namespace Drupal\herodevs_vue\Plugin\Block;
+
+use Drupal\Core\Access\AccessResult;
+use Drupal\Core\Block\BlockBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Session\AccountInterface;
+
+/**
+ * Provides a HeroDevs Vue block.
+ *
+ * @Block(
+ *   id = "herodevs_vue_block",
+ *   admin_label = @Translation("HeroDevs Vue block"),
+ * )
+ */
+class HeroDevsVueBlock extends BlockBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build() {
+    return \Drupal::formBuilder()->getForm('Drupal\herodevs_vue\Form\HeroDevsVueBlockForm');
+  }
+  /**
+   * {@inheritdoc}
+   */
+  protected function blockAccess(AccountInterface $account) {
+    return AccessResult::allowedIfHasPermission($account, 'HeroDevs Vue');
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function blockForm($form, FormStateInterface $form_state) {
+    $form = parent::blockForm($form, $form_state);
+    $config = $this->getConfiguration();
+    return $form;
+  }
+  /**
+   * {@inheritdoc}
+   */
+  public function blockSubmit($form, FormStateInterface $form_state) {
+    $this->setConfigurationValue('herodevs_vue_block_settings', $form_state
+    ->getValue('herodevs_vue_block_settings'));
+  }
+
+}
diff --git a/web/modules/herodevs/herodevs_vue/templates/herodevs_vue.html.twig b/web/modules/herodevs/herodevs_vue/templates/herodevs_vue.html.twig
new file mode 100644
index 000000000..584378dc2
--- /dev/null
+++ b/web/modules/herodevs/herodevs_vue/templates/herodevs_vue.html.twig
@@ -0,0 +1,31 @@
+{#
+/**
+ * @file
+ * HeroDevs Vue Page Template
+ *
+ * Available variables:
+ *   - vue_cdn
+ *
+ * @ingroup themeable
+ */
+#}
+<h3>Drupal PHP page:</h3>
+Fetching Vue from: <a href="{{vue_cdn}}">{{vue_cdn}}</a>
+
+<h3>Vue App</h3>
+<script src="{{vue_cdn}}"></script>
+<div id="app">
+  <p v-html="message">
+  </p>
+</div>
+<script>
+  const { createApp, ref } = Vue
+  createApp({
+    setup() {
+      const message = ref('This is an example Vue app!')
+      return {
+        message
+      }
+    }
+  }).mount('#app')
+</script>