Menu
I'm new to Vue.js, I've used AngularJS for some time and in angular we used to load templates such as,
template: '/sometemplate.html', controller: 'someCtrl' How can we do such a thing in Vue, instead of keeping large HTML templates inside JavaScript like this,
new Vue({ el: '#replace', template: '<p>replaced</p>' }) This is OK for small templates but for large templates is this practical?
Is there a way to load external template HTML or use HTML template inside a script tag like in Vue?
<script type="x-template" id="template">HTML template goes here</html> 
695
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
x Syntax x, Vue provided the inline-template attribute on child components to use its inner content as its template instead of treating it as distributed content. html <my-component inline-template> <div> <p>These are compiled as the component's own template.</
vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs): <template> <div class="example">{{ msg }}</div> </template> <script> export default { data() { return { msg: 'Hello world!', } }, } </script> <style> .example { color: red; } </style>
You can use the script tag template by just referring to its id.
{ template: '#some-id' } Though, I highly recommend using vueify (if you use browserify) or vue-loader (if you use webpack) so you can have your components stored in nice little .vue files like this.
Also, the author of Vue wrote a nice post about the topic of external template urls:
https://vuejs.org/2015/10/28/why-no-template-url/
194
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
