### Step 1 - Pin vue to your project

pin "vue", to: "https://ga.jspm.io/npm:vue@3.2.26/dist/vue.esm-browser.js", preload: true

### Step 2 - Initialize Vue app

create `app/javascript/vue.js`

```js
import * as Vue from "vue"
import HelloWorld from "./components/HelloWorld"

document.addEventListener("DOMContentLoaded", () => {
  const element = document.querySelector("#app");
  if (element !== null) {
    const app = Vue.createApp({});
    
    // register your components
    app.component('hello-world', HelloWorld);

    app.mount("#app");
  }
});
```

### Step 3 - Import vue.js in application.js

in `app/javascript/application.js` add the following line

`import "./vue"`

### Step 4 - Create components folder

create `app/javascript/components`

Then add your Vue component `app/javascript/components/HelloWorld.js`

```js
const HelloWorld = {
  template: `
    <div>
      <h1>{{ message }}</h1>
    </div>
  `,
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
}

export default HelloWorld;
```

### Step 5 - Add to component to view

in `home/index.html.erb`

```html
<div id="app">
  <hello-world></hello-world>
</div>
```