Problem with template implementation (VUE) using .NET (MVC)

Question

I'm trying to implement an external template (creating an HTML page), but I can not succeed. This page is a ASP.NET MVC page that contains a Vue app.

I want to move the template section of this component to an external file, but whenever I do this it doesn't work.

The following (below) does work, but it's not easy to maintain or build upon due to loss of text editing features.

Vue.component('my-component', { template: '#my-component' }

This is the current code and it works perfectly:

var foo = Vue.component('foo', {
template:'
<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>',
data: function () { 
  return {
    foos: null,
    NumColuns: 3 
  }
}, 
mounted() { 
 axios
  .get('/api/account/foo/')
  .then(response => {
    this.foos = response.data                
   })
  .catch(error => {
    console.log(error1)
      this.errored = true
  })
  .finally(() => this.loading = false)
}
});
var foo = new Vue({ 
  el: '#foo-vue' 
});

#my-component means the template is inside the HTML on that page. From your explanation it isn’t clear if the Vue code is on that page or some other file or what exactly. Could you clarify exactly what file has what in them? — Sami Kuhmonen
– Sami Kuhmonen, Commented Jun 28, 2019 at 18:25
I think he has everything in one JS file, including the template and he's referencing that from a HTML page. he wants to have the template in a separate file. — Ryan Ternier
– Ryan Ternier, Commented Jul 2, 2019 at 21:16
All my code is on the JS page, and I would like to separate it to an HTML page (template). — Maykulino
– Maykulino, Commented Jul 3, 2019 at 21:19

tony19 · Accepted Answer · 2022-07-15 01:51:03Z

3

+25

To fetch the HTML template from a file you need a async component.

Documentation: https://v2.vuejs.org/v2/guide/components-dynamic-async.html

In your example fetch the HTML and return the promise in the Vue.component factory.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <script src="https://unpkg.com/vue"></script>
</head>

<body>

  <div id="app">
    <foo></foo>
  </div>

  <script>
    var foo = Vue.component('foo', () => {
      return fetch('/template.html')
        .then((response) => response.text())
        .then((html) => {
          return {
            template: html,
            data: function () {
              return { foos: null, NumColuns: 3 }
            },
            mounted() {
              this.foos = [{ foo: 1, ColName: "A" }];
              //  axios.get('/api/account/foo/').then(response => {
              //     this.foos = response.data
              //    })
              //   .finally(() => this.loading = false)
            }
          };
        });
    });
    var foo = new Vue({
      el: '#app'
    });
  </script>
</body>

</html>

template.html

<table class="table">
 <template v-for="(foo, ColName, index) in foos">
    <template v-if="index % 3 == 0">
        <tr>
        </tr>
    </template>
    <th>{{ColName}}</th>
    <td v-if="foo">{{foo}}</td>
    <td v-else> -- </td>
 </template>
</table>

edited Jul 15, 2022 at 1:51

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 5, 2019 at 13:29

Niels Kooiman

1112 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Ternier Over a year ago

is there no way to import it the way Vue documentation has for .vue files?

Lukas Derksen · Accepted Answer · 2019-07-10 11:25:13Z

The best thing you can do is configure an entire Vue project, so you can use .vue template files. I recently found an article that explains in detail how to achieve this, but it's specifically aimed at browser extensions. The steps you have to undertake to achieve it, in this case, are identical for the most part, so I'll just link the article here anyway: https://medium.com/javascript-in-plain-english/how-i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d.

Basically what's happening is, you'll configure the Vue project yourself with Webpack to compile the Vue files into one app.js file, which you'll then reference in your file (in the tutorial this file is his app.html). It will then inject its components into the #app element and handle all virtual DOM manipulations.

tony19 · Accepted Answer · 2022-07-16 00:07:01Z

2

If your view is a razor .cshtml template then you can just extract your template to a html file and load that file to your ASP.NET MVC view as raw html code since Vue template is valid html:

<!-- in cshtml view -->
<script id="my-component" type="text/x-template">
    @Html.Raw(File.ReadAllText(Server.MapPath("~/Path/To/Template/my-component-template.html")))
</script>

And in your Vue component it should work with template: '#my-component' as you mentioned.

Docs: Vue: Edge Cases

P.S. You can prepare a partial view for your components or create some extension method to make code more readable and add some caching.

edited Jul 16, 2022 at 0:07

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 7, 2019 at 11:12

Max Sinev

6,0192 gold badges29 silver badges37 bronze badges

Collectives™ on Stack Overflow

Problem with template implementation (VUE) using .NET (MVC)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related