[Suggestion] [2.0] - Inline Templates

[taylorotwell]

Is there a deeper technical reason for why inline-template can't be supported in Vue 2.0? A couple reasons for my interest. First, it makes it easy to get people attracted to Vue when we can demo some component stuff quickly using simple inline-template syntax for a component on a single page without having to do any ES6 compilation or anything like that. Secondly, it makes user experience (as in customer end-users) better because I don't get any weird flashes where stuff is loading behind the scenes.

I recently used it extensively to build Laravel Spark where I can use inline templates which allow me to export the "HTML" files into a vendor directory that purchasers of the scaffolding can easily edit without having to worry about JS compilation, etc. and can basically act like they are typical HTML pages.

I know it might not be the most "technically correct" approach in the eyes of more elite JS developers, but just speaking as a common person, it was fairly useful in several situations.

Was curious if there was some deep technical reason for why the syntax can't work with the other new Vue 2.0 stuff or if was being removed only for the reason that it's considered "bad practice" among some developers?

[phroggyy]

To add to this, I'd like to point out that inline templates is something that sets Vue apart from other frameworks. A lot of other JS frameworks will want you to write your templates in template files and compile them, but in Vue, you don't have to! This is something that makes Vue feel all the more magical; you have an existing template, but you want some reactivity and clean JS in there, so you wrap it in your custom tag, like <card-payment>, write the JS, and you're done. You use the server-side rendering and variables that you already have, and if you want, you can of course start migrating it to an API-based template. Furthermore, this also allows for much more comprehensible server-side routing.

I think what's crucial here is that Vue is something that can be added afterwards. You don't have to make a Vue project, you just start a project, and then pull in Vue, and to me that's always been the charm with Vue over e.g Angular or React.

[azamat-sharapov]

Hmm, maybe it could be a plugin? I personally don't use it at all. I think it's mostly useful, when template is partially rendered on server.

[phroggyy]

@azamat-sharapov indeed, and that is exactly the point. That's always what made Vue great to me, that I as a backend developer can still easily declare all my routes and functionality in the backend, and render the views there, and use JavaScript for its original intent – interaction.

[JeffreyWay]

@azamat-sharapov Tons of developers are doing that very thing. It's what makes Vue so special. It can adapt to whatever style of project you're working on.

If this is being removed solely because it's "bad practice" ... well, meh. It was awesome, and never bit me even once.

If inline-template and filters return, I will be very excited for Vue 2. Until then, I'm mostly stressed about the upgrade.

[agc93]

Especially surprising that inline templates (so useful for server-side rendering) are being removed in the same update that promises improved server-side rendering support.

[phroggyy]

@agc93 that in itself isn't very surprising. The goal of the server-side rendering was to have it non-blocking and streamed to your Vue instance rather than having the user wait for it to render before anything else can happen. Regardless, I find it a travesty.

[azamat-sharapov]

promises improved server-side rendering support

@agc93 no, I think that is completely different thing. In 2.0, Vue.js can work in server, itself, to render templates.

@JeffreyWay @phroggyy agreed. I was active PHP/Laravel user myself earlier and I know many people use it. But there should be some technical reason to remove it, at least to avoid increased size of library maybe. So, if it can be made plugin, that probably makes everybody happy then :)

[jackmcdade]

We use inline templates everywhere in Statamic 2 for the very same reasons @taylorotwell does with Spark - it provides a great middle-ground between PHP and JavaScript when you're not building SPAs. I want to understand and follow best practices, but this one is literally one of the reasons we love using Vue.js.

I can't even imagine how I'd approach what we're able to do with Vue without them. The thought of it is kind of making me panic a little.

[nirazul]

I'm so glad that I'm not the only one who feels like that. Vue is so magical because I can use it for CMS project and SPAs. You can't imagine how glad I was when I could use vue with inline-template within a CMS project for the first time and it just worked!
I'm quite sure that the removal of inline-template will make it impossible for me to use this framework in half (or more) of my projects. This leads again to the sad sad circumstance that I'll have to maintain/learn two different systems of frontend frameworks. inline-template is just a sublime piece of API in my opinion and there should be a really really good reason to remove it, as well as some possibility to support it as a plugin.

I see v2 just like JeffreyWay (wow, hi there btw!): Keep (a simple variant of) filters and inline-template and I'm happy. Keep (or implement) some sort of global event bus and I'm really looking forward to the next version!

[phroggyy]

After talking about this with @rizqidjamaluddin, he pointed out that you can currently use

<script type="x-template" id ="foo">
    <div>
        You can place your template here
    </div>
</script>

And then in your JS file you can just do

var FooComponent = Vue.extend({
    template: '#foo'
})

So an important question now is if Vue 2.0 will break this behaviour as well, e.g is this kind of templating considered inline-templating, or would this be a viable upgrade path?

(docs for reference)

[nilssolanki]

At my place of work, we do a lot of projects with Django CMS. inline-template, and custom delimiters for that matter, made it possible to declare vue components within the backend templates and was in a way our "server-rendering".

Without this possibility, we couldn't do any frontend-editing in the CMS anymore, thus it would effectively break. Apart from that, we would probably have to switch to an approach closer to SPAs, which would mean a lot more development work on the backend (defining APIs, etc.). Thus using vue might become a budgetary liability as well (at least, until we've adapted to these procedures).

[JosephSilber]

This is most definitely NOT an inline template, and there's been no indication that it would ever be removed.

[taylorotwell]

@phroggyy that's not quite the same convenience or functionality as pure inline templates.