View profile

Vue.js Developers Issue #74 - Our Experience Developing An eCommerce SPA using Nuxt & Laravel, Building Renderless Vue Components, Quickly Building RESTful UIs in NuxtJS and more

Welcome to issue #74! Before we get to the article and tutorial links, I'm going to propose an idea f
Vue.js Developers
Vue.js Developers Issue #74 - Our Experience Developing An eCommerce SPA using Nuxt & Laravel, Building Renderless Vue Components, Quickly Building RESTful UIs in NuxtJS and more
By Anthony Gore • Issue #74 • View online
Welcome to issue #74! Before we get to the article and tutorial links, I’m going to propose an idea for a new open-source Vue project for building extendable component templates. I’d be interested in your thoughts on the need and viability!

Proposal: vue-template-extension-loader. A Webpack loader for extending .vue component templates.
One thing Vue component templates don’t offer is inheritance. It’s not something that’s matters in small apps, but it can be an limitation in enterprise apps.
Imagine you’re building an app with many components, but most have similar templates with only minor variations. How do you keep the markup DRY?
One possibility is to combine all the variations into a single “master” component. Bu this will require lots of props and v-ifs to provide the necessary variations at runtime.
Another possibility is to use slots and have a parent component determine the variations. But this can be a poor design if it forces you to separate single units of functionality across multiple components with separate data models unnecessarily.
An interesting solution is to use an HTML preprocessor that supports template extension, like Pug. You first create an abstract “base” template in a Pug file and have other components extend this template, which Pug allows. I wrote about this method in a blog post last year.
The Pug method is not perfect, though. It solves the problem of keeping markup DRY, but it requires an architecture that clashes with the natural design of single-file components.
I think the means of an even better solution have come with Vue Loader 15 and support for custom blocks. But rather than provide an explanation here, I’ll point you to the proposal on GitHub.
If you’re developing enterprise Vue apps and have a horse in this race, I’d like to hear your opinion. I’d also like to hear any thoughts on the viability of this approach.
7 Must-Read Links From This Week
Building "Renderless" Vue Components
Our Experience in Development of SPA Using VueJS + Nuxt
Quickly Building RESTful UI's in NuxtJS
Testing Vuex Actions Correctly with Jest
Designing a GraphQL API
Sponsored
Want your sponsored link or post in the next issue? Contact anthony@vuejsdevelopers.com for advertising rates.
In Case You Missed It...
Thanks for reading! Until next week,
Did you enjoy this issue?
Anthony Gore

Hi there! The Vue.js Developers Newsletter is a weekly curated publication of the best articles, latest news and coolest Vue projects. Subscribe now stay up-to-date with everything Vue.js.

If you don't want these updates anymore, please unsubscribe here
If you were forwarded this newsletter and you like it, you can subscribe here
Powered by Revue