Using Vue in jQuery and JavaScript Sites
Tags: vue, javascript, jquery, tutorial
Published: 2020-03-01 02:13:40

---
title: Using Vue in jQuery and JavaScript Sites
published: true
description: How to use Vue in a jQuery or JavaScript site
tags: vue, javascript, jquery, tutorial
---
{% raw %}
<p>So you've got a legacy project on your desk. You know the type, from back in the day when jQuery was the go-to tool. Now that project needs an update and although jQuery is still a useful tool, you know doing the update would go a lot quicker in Vue. <br>Ok, let's be honest, you might be looking for an excuse to use Vue -- I won't tell. </p>

<p>The problem is, while the changes are a good candidate for Vue, there's still the rest of the site in jQuery or vanilla JavaScript. You don't want to refactor the whole thing, but dang! Vue would be awfully handy in there. So the question is: <br><strong>Can I use Vue in a jQuery or vanilla JavaScript site?</strong></p>

<p class="has-text-align-center"><strong>Yes you can.</strong></p>

<h2>It's All JavaScript Anyway</h2>

<p>Although jQuery and Vue are different, they both work with the DOM and use JavaScript.</p>

<p>That means using them in the same file shouldn't be an issue. Think of them as running parallel to each other, like two lanes going the same way on a highway. </p>

<p>In this tutorial, we're going to add Vue functionality to a simple jQuery page and show you how Vue and jQuery (and vanilla JavaScript) can work together in harmony.</p>

<p>We're assuming you know jQuery / JavaScript well, and have worked with Vue.  It's nothing fancy, just basic concepts.</p>

<h2>The Project</h2>

<p>Let's say we're working with an HTML file where you make a selection and it uses jQuery to tell you what's been selected.</p>

<p>This is a standard type of app where the user makes a choice and the code responds.  The HTML looks like this:</p>

<pre class="wp-block-code"><code>&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;!-- Load JQuery --&gt;
    &lt;script
  src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
  integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
  crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        function doFoodGroup(){
            //Returns what is selected
            var selected = $("input:radio[name ='food_group']:checked").val();
            alert('You selected: '+selected)
        }
    &lt;/script&gt;
    &lt;style&gt;
        .demoDiv{
            display: inline-block; 
            width: 49%;
            vertical-align: top;
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;JQuery and Vue&lt;/h1&gt;
    &lt;div class="demoDiv"&gt;
        &lt;h2&gt;Select a Food Group:&lt;/h2&gt;
        &lt;input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()"&gt; Fruit
        &lt;br&gt;
        &lt;input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()"&gt; Veggie
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>



<p><strong>Adding functionality through Vue</strong></p>



<p>We're going to update the code, so when a user makes a selection,  their choice is displayed on the page.   We're going to use Vue to code this, so let's load it.</p>



<h2>Adding Vue</h2>



<p>To use Vue, you need 3 things:</p>



<ol><li><strong>Load Vue in the page</strong></li><li><strong>Build your Vue code</strong></li><li><strong>Give it an element  on the page to work in</strong></li></ol>



<p>Let's set it up:</p>



<p>1. <strong>Add Vue</strong> to the page through the <strong>header</strong>:</p>



<pre class="wp-block-code"><code>&lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;</code></pre>



<p>2. <strong>Create a file </strong>with the Vue code in it, and <strong>load it </strong>in the HTML header:</p>



<p>The file called '<strong>vue_demo.js</strong>'.  <br>It's going to list fruit and veggies, so it looks like:</p>



<pre class="wp-block-code"><code>var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"], 
        veggies: ["lettuce", "peas", "carrots", "tomatoes"], 
    },
})</code></pre>



<p>Now <strong>load the file</strong> in the HTML header</p>



<pre class="wp-block-code"><code>&lt;!-- Load script file.  'defer' loads after body is generated --&gt;
&lt;script src="vue_demo.js" defer&gt;&lt;/script&gt;</code></pre>



<p>3. Create a <strong>DIV</strong> for Vue to use:</p>



<pre class="wp-block-code"><code>&lt;!-- Div where Vue runs --&gt;
&lt;div id="app" class="demoDiv"&gt;
&lt;/div&gt;</code></pre>



<p>Not much to see here, so <strong>add some code to display the list in the Vue div:</strong></p>



<pre class="wp-block-code"><code>&lt;!-- Div where Vue runs --&gt;
    &lt;div id="app" class="demoDiv"&gt;
        &lt;div&gt;
            &lt;h3&gt;Fruit choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="fruit in fruits"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="fruit"&gt;{{ fruit }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;h3&gt;Veggie choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="veggie in veggies"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="veggie"&gt;{{ veggie }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>



<p>Note: This is a list of radio options because we're selecting them later. </p>




<p>When you look at the page, you should see jQuery 'Select a Food Group' div in one area and Vue's list of fruits and veggies next to it.  So, you <em>can</em> have a Vue running in a page using jQuery -- problem solved!</p>

<p>Of course in real life, you'll probably need Vue to interact with the rest of the page.  Data needs to go back and forth between Vue and JavaScript.  </p>

<p>It's time to change lanes.  </p>

<h2>Moving Between Vue and Javascript</h2>

<p>Because Vue and Javascript are parallel, you can pass variables between them.  But, like changing lanes while driving, be careful you don't collide with something!</p>

<p>When working with Vue and jQuery / JavaScript there's a couple of caveats to keep in mind:</p>

<h4>1. Stay in Your Lane (When You Can)</h4>

<p>Remember you've got two places to write your code -- DOM level JavaScript / jQuery or in Vue. It's easy to be on autopilot and start writing code in Vue, when it would really work better in DOM JavaScript.  The next thing you know, you're doing contortions trying to get something on the screen!</p>

<p><strong>GOTCHA! Where you put your code matters</strong>.</p>

<p>If your code is <em>in</em> Vue and you're trying to change a div <em>outside</em> of the Vue div (or vice versa), you can run into problems.  Sure, there's ways around this, but it can be needlessly complicated.</p>

<p>As a general rule:  <strong>Put your code where the element you're changing is</strong>.</p>

<ul><li>If you're changing something within the Vue div, then let Vue handle it.  </li><li>If you're updating a div outside of the Vue div (in the document), then use the regular JavaScript to deal with it.</li></ul>

<p>In other words, stay in your lane (life will be easier).</p>

<h4>2. Change Lanes Politely</h4>

<p>Of course sooner or later you'll have to pass information from DOM JavaScript to Vue and back again.  You need to change lanes.</p>

<p>When changing lanes while driving you make sure the other lane knows you're coming, and you behave predictably.  It's the same idea when passing a variable between DOM JavaScript and Vue.  Make sure the other side knows what's coming and can deal with it.</p>

<p>As we're about to see, it's not a big trick and usually done through functions.</p>

<h2>How To Pass Values to Vue</h2>



<p>When you first look up how to pass a value to Vue, you probably found terms like: props, emit, components, parent/child. Do I need to build a component to pass data?</p>



<p>Oh my, this feels complicated!<br>It's not.</p>



<p><strong>Gotcha! You don't use components to pass parameters into Vue.</strong></p>



<p><a href="https://vuejs.org/v2/guide/components.html" target="_blank" rel="noreferrer noopener" aria-label="Components (opens in a new tab)">Components</a> are great things <em>inside </em>Vue. We're passing data from <em>outside</em> Vue, so it doesn't apply. It's the wrong tool for the job -- it's actually simpler than that. </p>



<h3>Remember: Vue is a Javascript Object!</h3>



<p>When you loaded Vue, it became an object within Javascript. </p>



<p>The code:  <code>var vue_choices = new Vue({ </code><br>means you've created an JavaScript object called 'vue_choices' in the document.  That means it's available to JavaScript in the document.  In fact, you can get see the vue_choices object through the console log in the DOM JavaScript.</p>

<p>Ex.:<code> console.log( vue_choices )</code> would display:</p>

<pre class="wp-block-code"><code>Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$attrs: (...)
$children: []
$createElement: ƒ (a, b, c, d)
$el: div#app.demoDiv
$listeners: (...)
$options: {components: {…}, directives: {…}, filters: {…}, _base: ƒ, el: "#app", …}
$parent: undefined
$refs: {}
$root: Vue {_uid: 0, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}
$scopedSlots: {}
$slots: {}
$vnode: undefined
fruits: (...)
veggies: (...)</code></pre>



<p>As you can see, the Vue object is laid out in all its glory. That includes things like variables and functions/ methods. </p>



<p>So, if you wanted to access a Vue variable or method from Javascript in the page, you would use something like:</p>



<pre class="wp-block-code"><code>console.log(vue_choices.fruits)</code></pre>



<p>Which gives you access to the fruits list:</p>



<pre class="wp-block-code"><code>4) ["apples", "pears", "peaches", "cherries", __ob__: Observer]
0: "apples"
1: "pears"
2: "peaches"
3: "cherries"</code></pre>



<p>That means<strong> you an reach into Vue and work with any variables or methods. </strong><br>Now you are drunk with power! Muhahah!</p>



<p>Ok, back to work. </p>



<p>In our example, we want to tell Vue when 'vegetable' or 'fruit' has been chosen.   Since we're asking <em>Vue</em> to do the work, it makes sense to <strong>write a function/method <em>in Vue</em></strong>.  <strong>That function can be called from the DOM JavaScript level</strong>.  <br></p>



<p>Because the function can take a parameter, it's a way of passing data from the DOM level into Vue.</p>



<p>Let's see this in action.</p>



<p>Create a method in Vue called <code>showChoice()</code>. The method takes a parameter with the choice, and will display a list based on the choice.<br>Note: The whole show/hide thing uses flag variables,  so we'll add them.</p>



<p>The <strong>Vue code</strong> looks something like:</p>



<pre class="wp-block-code"><code>var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"],
        veggies: ["lettuce", "peas", "carrots", "tomatoes"],

        //Display
        show_fruits: false,
        show_veggies: false,
    },

    methods: {
        showChoices: function (getChoice) {
            //Set display vars according to choice
            switch (getChoice) {
                case 'fruit':
                    this.show_fruits = true;
                    this.show_veggies = false;
                    break;
                case 'veggies':
                    this.show_fruits = false;
                    this.show_veggies = true;
                    break;
                default:
                    this.show_fruits = false;
                    this.show_veggies = false;
            }
        }
    },   // end methods
})  // end vue</code></pre>



<p>The Vue div uses <a href="https://vuejs.org/v2/guide/conditional.html#v-show">v-show</a>  to handle show/hide and looks like:</p>



<pre class="wp-block-code"><code>&lt;!-- Div where Vue runs --&gt;
    &lt;div id="app" class="demoDiv"&gt;
        &lt;div v-show="show_fruits"&gt;
            &lt;h3&gt;Fruit choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="fruit in fruits"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="fruit"&gt;{{ fruit }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;div v-show="show_veggies"&gt;
            &lt;h3&gt;Veggie choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="veggie in veggies"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="veggie"&gt;{{ veggie }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;</code></pre>



<h4>Call the Vue Function from JavaScript</h4>



<p>Now that the <em>function</em>  <code>showChoices() </code>is part of the Vue <em>object</em>  <code>vue_choices</code>,  you can call it in JavaScript like this:  <strong><code>vue_choices</code></strong><code>.showChoice(  )</code> .</p>



<p>Of course we need to add the choice parameter, which we get in the JavaScript  <code>doFoodGroup() </code>function.  </p>



<p>The function should look like:</p>



<pre class="wp-block-code"><code>function doFoodGroup() {
//Returns what is selected
            var selected = $("input:radio[name ='food_group']:checked").val();
            alert("You selected: " + selected);

            //Send the selection to Vue
            vue_choices.showChoices(selected);
        }</code></pre>



<h3>Putting It Together</h3>



<p>At this point the user selects a food type (fruit or veggie) and passes the choice to Vue via a Vue function called in JavaScript.  </p>



<p>Your <strong>HTML code</strong> should look like:</p>



<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load JQuery --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"&gt;&lt;/script&gt;

    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_demo.js" defer&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        function doFoodGroup() {
            //Returns what is selected

            var selected = $("input:radio[name ='food_group']:checked").val();
            showSelection(selected);

            //Send selection to Vue
            vue_choices.showChoices(selected);
        }

        function showSelection(getSelection) {
            alert("You selected: " + getSelection);
        }
    &lt;/script&gt;

    &lt;style&gt;
        .demoDiv {
            display: inline-block;
            width: 49%;
            vertical-align: top;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;JQuery and Vue&lt;/h1&gt;
    &lt;div class="demoDiv"&gt;
        &lt;h2&gt;Select a Food Group:&lt;/h2&gt;
        &lt;input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()" /&gt; Fruit
        &lt;br /&gt;
        &lt;input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()" /&gt; Veggie
    &lt;/div&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app" class="demoDiv"&gt;
        &lt;div v-show="show_fruits"&gt;
            &lt;h3&gt;Fruit choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="fruit in fruits"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="fruit" /&gt;{{ fruit }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;div v-show="show_veggies"&gt;
            &lt;h3&gt;Veggie choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="veggie in veggies"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="veggie" /&gt;{{ veggie }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>



<p>Your <strong>Vue code</strong> should look like:</p>



<pre class="wp-block-code"><code>var vue_choices = new Vue({
    el: '#app', //Attach to element id app
    data: {
        fruits: ["apples", "pears", "peaches", "cherries"],
        veggies: ["lettuce", "peas", "carrots", "tomatoes"],

        //Display
        show_fruits: false,
        show_veggies: false,
    },

    methods: {
        showChoices: function (getChoice) {
            //Set display vars according to choice
            switch (getChoice) {
                case 'fruit':
                    this.show_fruits = true;
                    this.show_veggies = false;
                    break;
                case 'veggies':
                    this.show_fruits = false;
                    this.show_veggies = true;
                    break;
                default:
                    this.show_fruits = false;
                    this.show_veggies = false;
            }
        },

    },   // end methods
})  // end vue</code></pre>



<p>Now we're getting some where!</p>

<h3>Vue Data Vars vs Methods / Functions</h3>

<p>Although you can change a Vue variable directly through JavaScript by using something like:</p>

<pre class="wp-block-code"><code>vue_choices.show_fruits = false</code></pre>

<p>Using a method is probably a better idea.  Remember:  Change Lanes Politely.</p>

<p>Why?  That variable may be manipulated within Vue and JavaScript making changes from the outside may cause problems. So <strong>change Vue data vars through a method</strong> (and save yourself a headache)!</p>

<h2>Passing Data from Vue to Javascript </h2>

<p>We just called a Vue method to pass a parameter <em>to</em> Vue <em>from</em> Javascript.  If you want to go the other way and pass a parameter <em>from</em> Vue <em>to</em> JavaScript, it's the same idea only backwards.   Yup, that means <strong>calling a JavaScript function inside Vue.</strong></p>

<p>Note:  Yes, you can access the JavaScript variable directly, but a function is less risky if something changes.</p>

<p>In this example, let's say whenever the user selects a specific fruit or veggies, we need to pass that choice back to the function <code>showSelection()</code> in the main document.  </p>

<p>As you're pondering this problem, you're probably thinking using an onChange event to fire <code>showSelection()</code> is the solution.<br>No it's not.</p>

<p><strong>Gotcha!  Regular JavaScript events don't work well in Vue elements.</strong></p>

<p>If you try to add a regular 'onchange' event to the element, Vue will ignore it.  It uses v-on:click.  <br>If you try to run something like:   <code>v-on:click=" showSelection()"</code>, that won't work either because <code>showSelection()</code> is not a Vue thing. </p>

<p>Remember, Vue's job is to handle its section of the DOM.  If you change an element <em>outside of Vue</em>, it causes problems.  Stay in your lane!</p>

<p><strong>Solution:  Access JavaScript objects (functions) inside Vue</strong>.</p>

<p>Although the Vue<em> DOM </em>doesn't like regular JavaScript (or jQuery) in it, Vue<em> methods</em> are cool using JavaScript objects.  <br>Using jQuery inside your Vue file is possible, but probably not worth the fight.  Stick with JavaScript if you can.</p>

<p>So, the approach is:</p>

<ol><li><strong>Create a Vue Method </strong>that fires the parent document <code>showSelection()</code></li><li>In the Vue div, use <strong>v-onclick="vueMethod()" </strong>to run it.</li></ol>

<h3>Vue Method</h3>

<p>The method is very simple, just run the function defined in the parent document.  Make sure it takes a parameter that can be passed to  <code>showSelection()</code>.</p>

<p>That means it looks something like:</p>

<pre class="wp-block-code"><code> getSelection: function(selection) {
                showSelection(selection)
            }</code></pre>

<p>Wait!  You can just use the JavaScript function defined in the document inside Vue?<br>Yup, that the whole point.</p>

<p>The function is a JavaScript object, Vue is JavaScript and has access to the objects.  That's how it all works.</p>

<p> Your <strong>Vue code</strong> should look like: </p>

<pre class="wp-block-code"><code>var vue_choices = new Vue({
        el: '#app', //Attach to element id app
        data: {
            fruits: ["apples", "pears", "peaches", "cherries"],
            veggies: ["lettuce", "peas", "carrots", "tomatoes"],

            //Display
            show_fruits: false,
            show_veggies: false,
        },

        methods: {
            showChoices: function(getChoice) {
                //Set display vars according to choice
                switch (getChoice) {
                    case 'fruit':
                        this.show_fruits = true;
                        this.show_veggies = false;
                        break;
                    case 'veggies':
                        this.show_fruits = false;
                        this.show_veggies = true;
                        break;
                    default:
                        this.show_fruits = false;
                        this.show_veggies = false;
                }
            },

            getSelection: function(selection) {
                showSelection(selection)
            }

        }, // end methods
    }) // end vue</code></pre>

<h3> Update the Vue Div</h3>

<p>We have the method, we want to fire it when a fruit or veggie is selected.  So you would change your inputs to something like:</p>

<pre class="wp-block-code"><code>&lt;input type="radio" name="food_selected" v-bind:value="fruit" v-on:click="getSelection(fruit)" /&gt; </code></pre>

<h4>Passing Parameters: Bind Values</h4>

<p>You want to pass the value of the input to the method.  The value is defined by <code>v-bind:value="fruit"</code>, this is what is tied to that input.</p>

<p>Oh, don't forget to change the 'veggie' inputs one too!</p>

<p>Your <strong>html file</strong> should look like this:</p>

<pre class="wp-block-code"><code>&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;!-- Load JQuery --&gt;
    &lt;script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"&gt;&lt;/script&gt;

    &lt;!-- Load Vue --&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;

    &lt;!-- Load script file.  'defer' loads after body is generated --&gt;
    &lt;script src="vue_demo.js" defer&gt;&lt;/script&gt;

    &lt;script type="text/javascript"&gt;
        function doFoodGroup() {
            //Returns what is selected

            var selected = $("input:radio[name ='food_group']:checked").val();
            showSelection(selected);

            //Send selection to Vue
            vue_choices.showChoices(selected);
        }

        function showSelection(getSelection) {
            alert("You selected: " + getSelection);
        }
    &lt;/script&gt;

    &lt;style&gt;
        .demoDiv {
            display: inline-block;
            width: 49%;
            vertical-align: top;
        }
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;h1&gt;JQuery and Vue&lt;/h1&gt;
    &lt;div class="demoDiv"&gt;
        &lt;h2&gt;Select a Food Group:&lt;/h2&gt;
        &lt;input type="radio" name="food_group" value="fruit" onclick="doFoodGroup()" /&gt; Fruit
        &lt;br /&gt;
        &lt;input type="radio" name="food_group" value="veggies" onclick="doFoodGroup()" /&gt; Veggie
    &lt;/div&gt;
    &lt;!-- Div where Vue runs --&gt;
    &lt;div id="app" class="demoDiv"&gt;
        &lt;div v-show="show_fruits"&gt;
            &lt;h3&gt;Fruit choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="fruit in fruits"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="fruit" v-on:click="getSelection(fruit)" /&gt;{{ fruit }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;

        &lt;div v-show="show_veggies"&gt;
            &lt;h3&gt;Veggie choices:&lt;/h3&gt;
            &lt;ul id="fruit_list" style="list-style-type: none"&gt;
                &lt;li v-for="veggie in veggies"&gt;
                    &lt;input type="radio" name="food_selected" v-bind:value="veggie" v-on:click="getSelection(veggie)" /&gt;{{ veggie }}
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;</code></pre>

<h2>Summary</h2>

<p>Yes you can inject some Vue into a project built with regular JavaScript or jQuery.  It's not all or nothing.</p>

<p>You can pass data between JavaScript and Vue because it you're dealing with JavaScript objects.  JavaScript can look at Vue, Vue has access to functions written in the document.</p>

<p>The trick is to 'stay in your lane' -- work with whatever is controlling the element you're changing.</p>

<p>Keep jQuery outside of Vue, it's easier that way.</p>

<h3>Files</h3>

<p>You can find the files for this tutorial on GitHub:<br> <a href="https://github.com/workingwebsites/vue-jquery-javascript" target="_blank" rel="noreferrer noopener" aria-label="https://github.com/workingwebsites/vue-jquery-javascript  (opens in a new tab)">https://github.com/workingwebsites/vue-jquery-javascript </a></p>

{% endraw %}