[Vuejs]-Using VueJS in multipage WebForms project

by

0👍

As far as Vue.js is concerned the code you provided works like this:

html file 

<div id="app">
<foo-component title="Hello world">   
</foo-component>
</div>

javascript file

var foo = Vue.component('foo-component', {
    props: [
        'title'
    ],
    data: function () {
        return {
        };
    },
  template:` <div>
        <h1>{{title}}</h1>
    </div>`
    });

new Vue({
    el: '#app'
});

You have registered the component as foo-component but then you called ‘foobar’. Also, your Vue instance should be placed after you create the component so that it recognizes it.

👤Kiki

0👍

Not sure if there is an officially suggested solution to this. Probably just a bad practice to use it like so. One hacky way to get rid of the warning is to relocate you script tags using javascript to the bottom of the doc’s body before your Vue code executes:

const scripts = document.querySelector('#app').querySelectorAll('script');
for (let i = 0; i < scripts.length; i++) {
   document.body.appendChild(scripts[i]);
}
👤i–

0👍

Here is a working example. All it does it assemble the pieces you included in your question. It just works. I didn’t encounter your issue so I don’t know what you were doing wrong. Best to include an example per our guidelines another time, rather than just partial fragments–in our game, the devil is in the detail and it’s often something silly, as I’m sure you know 🙂

I’ve put the js directly in the page for simplicity here, so this is the whole thing. (The code-behind is just the generated empty class).

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="scripts/vue.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div id="app">
                <foobar inline-template title="Hello world">
                    <div>
                        <h1>{{title}}</h1>
                    </div>
                </foobar>
                <script>
                    Vue.component('foobar', {
                        props: [
                            'title'
                        ],
                        data: function () {
                            return {
                            };
                        }
                    });
                    new Vue({
                        el: '#app',
                        //components: {
                        //    foo
                        //},
                        data: {
                        },
                        methods: {
                        }
                    });
                </script>
            </div>
        </div>
    </form>
</body>
</html>
👤Reg Edit

Leave a comment