Using include statement in pug templates

[michaelalhilly]

It seems it is not possible to include a pug template within a .vue file. It would be nice if we could do this:

div#app
    include "some-template"

I've tried backing out of the template and entry script directories and neither worked.

include "../../html/partials/some-template"
include "../html/partials/some-template"

Current project structure is:

root
-src
--html
---partials
----some-template.pug
--js
---main.js (entry)
---view
----app.vue

[vizo]

I think Vue is about components .. So you should do another component with template and include it in a main component ...

[michaelalhilly]

That's true and I'm doing that now, but what if we want to reference a file containing mixins? I guess we just need to build components for those as well.

[vizo]

In Vue you have Components, Mixins, Directives, Plugins, Filters ... depends on your need.
Take "pug" more as a syntax not as template system ... "Template system" in Vue are components. I think we shouldn't mix more systems together ...

[michaelalhilly]

I see your point.

I'm finally immersing myself in reactive frameworks and I really like some of Vue's simplicity. However, I don't feel Single File Components is a very elegant solution to modularization.

I prefer keeping my code separated by language and using separate tools to process each. I would prefer it if we could reference files like pug, scss, etc. in our components and tell Vue which loader we want to use to process each. This way we can take full advantage of each tool, decide which versions we want to use, and keep our libraries separated. In my view this is better use of modularization and a more flexible and less opinionated solution. This would also make it much easier to add Vue to an existing project.

[yyx990803]

I would strongly recommend thinking in components rather than using a separate system for composing templates. If you prefer composing templates using pug, then maybe you shouldn't be using single file components at all.

[maziarz]

I have the exact challenge right now. Switching over from an CMS where i had pages with mixins (sections). The VueJS style is basically to have all template code in one component, which destroys the modularity of the current website. Having a separate component for each mixin seems to be overkill.

[simplesmiler]

@maziarz to be honest, it does not seem as an overkill to me to split parts of the page into components. Also take a look at component slots, they seem to be relevant for your use case.

[maziarz]

@simplesmiler i tried to rewrite a portion of the code to child components and i guess that the fact it holds JS and styling related to that child component may become quite intuitive at the end of the day. I will keep experimenting and see where it ends.

[michaelalhilly]

@yyx990803 I hear ya. After using Vue for a few weeks I agree that keeping the workflows separate is better.

I think the challenge for me is that the component HTML is tightly coupled to its JS. Since the single file approach allows us to manage HTML in its native state it's easier to work with, as opposed to ugly strings of inlined HTML. Unfortunately you have to lump your JS in there too. Is there a way to separate our component JS from its HTML?

I'm assuming this isn't expected behavior for a reactive framework since React also combines the two.

Also should mention my original concern was duplicate pug templates used in compiling static elements and then used later by Vue to update. Obviously I was wrong. Once I realized anything that would change state should be handled by Vue from the initial render it all made sense. So modularity is still maintained to that extent. Now I just want to separate my component code.

Actually it looks like this will get me there:

https://vuejs.org/v2/guide/components.html#X-Templates

[simplesmiler]

@michaelalhilly well, this has nothing to do with reactivity of the framework, but rather with the separation of concerns. In a component-oriented framework (as opposed to a controller-oriented framework, e.g. Angular 1) it makes more sense to separate by component rather then by tech, because template of A is more related to the logic of A than to the template of B.

If you have technical reasons to separate by tech (e.g. tools that don't understand vue), then you can extract template, script and styles into separate files, and just use vue as a manifest:

<!-- my-component.vue -->
<template src="./my-component.html"></template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

[michaelalhilly]

@simplesmiler That makes sense. Thanks for the example. I remember seeing that in the docs but completely forgot about it. Hmmm... I'll try both methods and see which feels better. I'm building a small app so x-templates may work well. If not the manifest approach will work nicely for me.

Thanks!

[ibyteyou]

#1122 solved!