VueJS : Including some static HTML and JS

Question

I am very new to VueJS coming from a mustache project. It was very easy to include common bits of HTML (footer, google tracking code etc).

How do I do the same with VueJS, some of the ways I read seem to be complete overkill (writing import components).

I have:

src

components

-- App.vue
assets

static

footer.htm

Components are not an overkill. They are the building units you use to manage complexity. — pishpish
– pishpish, Commented Oct 7, 2018 at 16:42
I may be missing something, just add to index.html outside of <div id="app"></div>. Use <script> for js and w3-include-html for html. Using vue cli 3, to include the bits in the build put them in the public folder. — user8745435
– user8745435, Commented Oct 7, 2018 at 19:44
I tried w3-include-html inside the html and didnt seem to work, does VueJS block it — Burf2000
– Burf2000, Commented Oct 7, 2018 at 20:50

tony19 · Accepted Answer · 2022-07-15 22:53:22Z

2

For the html, write components with just a <template> section.
Importing and using components inside components is very common in Vue, I wouldn't call it "complete overkill", you can also inject html into an element using the v-html directive, but I wouldn't recommend that for html you've writen yourself.

For the tracking code, it's a bit trickier as you can't just add <script> tags inside the template part of a component or v-html.
I recommend saving the tracking code as google-tracking.js, etc and import './google-tracking.js' in your app.

edited Jul 15, 2022 at 22:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 7, 2018 at 15:19

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS : Including some static HTML and JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related