Best of both worlds? v-for + server rendered list

[johnRivs]

Let's say I'm working with Laravel Blade and I have a list that should be sorted. I could embed the array into v-scope or something similar and use v-for but is there a way to display the list using Blade and have petite-vue take over (without destroying the server rendered content) so I can sort the list on the client?

[niutech]

You can populate and sort the initial data from server-rendered HTML like this: createApp({items: [].map.call(document.querySelectorAll('.items'), el => el.innerText).sort()}), then use it in v-for.

[johnRivs]

What I meant is more like using the server side templating engine (Blade in this case) to display the list but enhance it with petite-vue once it hits the browser, as opposed to embedding the data into petite-vue so it can render the data.

[niutech]

This is what I proposed above: first the HTML list is rendered server-side by Blade for progressive enhancement (eg. <ul v-scope><li v-for="i in items" v-cloak>{i}</li><li>First</li><li>Second</li>...</ul>'), then it is being populated as items into Petite Vue app, sorted by JS and finally inserted back to the <ul> by Petite Vue using v-for. Here is the demo.

[johnRivs]

I see. That's what I was referring to with without destroying the server rendered content. What I'm assuming is, the HTML is already there but as soon as petite-vue takes over, it will delete it and put new HTML in its place even if it's the same, right?
By the way, I don't need to sorted at first. That'd be done after pressing a button.

[niutech]

Technically, I am not destroying server-rendered content, only hiding it with CSS. But you can make Petite Vue to leave the HTML content intact until you click a button - just make a @click event handler which will take and sort items from HTML, e.g. items = [].map.call(document.querySelectorAll('.items'), el => el.innerText).sort();. See the demo.

[nfplee]

This can be achieved by rendering the server-side code (Blade) and client-side code (petite-vue) together and then adding a v-cloak attribute and loading class to the server-side code and just a v-cloak attribute to the client-side code. Now add the following CSS:

[v-cloak], .loading {
    display: none;
}

.loading[v-cloak] {
    display: block;
}

This will hide the client-side code until it is mounted and do the reverse with the server-side code.

This has the advantage that it is both SEO friendly and the user should not see a change in the UI before and after when it is mounted (providing the server-side code and client-side code produce the same result).