Skip to content

Instantly share code, notes, and snippets.

@jschee

jschee/gist:c81aea565bcc1b75a92823b99cec7a7d

Last active March 12, 2024 20:22
Show Gist options
  • Save jschee/c81aea565bcc1b75a92823b99cec7a7d to your computer and use it in GitHub Desktop.
Save jschee/c81aea565bcc1b75a92823b99cec7a7d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jschee renamed this gist Mar 12, 2024. 1 changed file with 8 additions and 8 deletions.
    16 changes: 8 additions & 8 deletions gistfile1.txt → gistfile1.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,10 +1,10 @@
    Step 1 - Pin vue to your project
    ### Step 1 - Pin vue to your project

    pin "vue", to: "https://ga.jspm.io/npm:[email protected]/dist/vue.esm-browser.js", preload: true

    Step 2 - Initialize Vue app
    ### Step 2 - Initialize Vue app

    create app/javascript/vue.js
    create `app/javascript/vue.js`

    ```js
    import * as Vue from "vue"
    @@ -23,17 +23,17 @@ document.addEventListener("DOMContentLoaded", () => {
    });
    ```

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

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

    `import "./vue"`

    Step 4 - Create components folder
    ### Step 4 - Create components folder

    create `app/javascript/components`

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

    ```js
    const HelloWorld = {
    @@ -52,12 +52,12 @@ const HelloWorld = {
    export default HelloWorld;
    ```

    Step 5 - Add to component to view
    ### Step 5 - Add to component to view

    in `home/index.html.erb`

    ```html
    <div id="app">
    <hello-world></hello-world>
    <hello-world></hello-world>
    </div>
    ```
  2. jschee created this gist Mar 12, 2024.
    63 changes: 63 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    Step 1 - Pin vue to your project

    pin "vue", to: "https://ga.jspm.io/npm:[email protected]/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

    ```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>
    ```