Pug template conditional class free#

Input(type='text' :placeholder='placeholder') The subcomponents use the extends feature of Pug which includes the base component and outputs any custom content in the input block (again, similar to slots, but it happens at compile-time). To extend the subcomponent’s template from the base, you’ll need to covert its template to Pug as well. Probably someone could make a custom webpack loader to avoid having to do this.

It’s a shame to have to do that since it kind of defeats the purpose of “single file” components. Now we can include this file in our base component so it can still be used as a normal single-file component: If we want our child components to extend the template we first need to put it into its own file SurveyInput.pug: Important: the outlet is kind of like a slot but the important difference is that template processing occurs at compile-time, not at run-time as it would with slots. Notice that we use block input to declare an 'outlet' where the subcomponent content will be distributed. Now, let’s convert our base component’s template to Pug syntax: Vue Loader should pick this up without any further config needed. My hack for extending Vue templates is to use the include and extends options provided by Pug (previously Jade). Pug HTML pre-processorīy using vue-loader and the lang property of the template in a single-file component, we can use HTML template pre-processing tools like Slim, Handlebars, etc. To do this, we’re going to need an HTML template pre-processor. Hopefully, I’ve convinced you that template logic and slots aren’t ideal, so now let’s look at how we can extend a component’s template like we can with its state/logic.

Now, the parent owns the state of each input and would have to communicate it with each child component using props/events, adding complex logic and verbosity. The downside to slots, though, is that you now have to organize the data model differently. Using this approach the parent can provide the correct markup for each input like this: SlotsĪnother conventional approach that could work is to put a slot where the input belongs. Once you get, say, 3–4 different question types the template will become big and messy. The downside of this approach is that it doesn’t scale well. Now you can declare your questions in the parent, Survey.vue, like this: Rather than making separate components for each input type, you could create a single mega-component and then specify the template using conditional logic fed by a prop called question-type i.e. Conventional options for extending the template (and why they aren’t ideal)Ī reasonable Vue user would first consider the following design patterns for the template:īut as I’ll show, both have downsides for the use case we’re considering, so there is a legitimate case for wanting to use the template-extension hack I’m going present. Import SurveyInput from './SurveyInput.vue' I’m going to keep it simple and use the extends component option.Īgain, there’s still a hanging question about how we get the base template into this subcomponent, as the Vue.extends API doesn't apply to templates!

Pug template conditional class free#

Ignoring the template for a moment, what will be our strategy for extraction and reuse of the state/logic? What we choose here will not affect our ability to extend the component template, so feel free to use mixins, higher-order components, or even the new composition API. This is where we’ll extend the template as you’ll shortly see.

I’m leaving a gap where the input element will need to go.

We don’t have any shared logic, but you could add it e.g.

The question prop is going to be common across each component.

Let’s first create a “base” component called SurveyInput.vue.

Notice that each survey question has a different input type:Īn obvious architecture would be to make each question into a separate component, which is what we’re going to do. Let’s say you’re trying to make a component-based survey app with Vue which looks like this: It’s a bit of a hack, but it does work! If you’re looking to extend a component’s logic and state, you probably want to read my other article Extending Vue.js Components which covers composition functions, mixins, higher-order components, etc. In this article, I’ll present a solution using the HTML template pre-processor Pug. Note: this article was originally posted here on the Vue.js Developers blog on 2. Do you find yourself wanting to extend a component’s template? Vue provides several means of extracting and reusing the component logic and state, but templates are deemed single-use only.