Vue.js and self-closing tags

Self-closing tags don’t (usually) work in DOM-based (in-browser) Vue template code, but they do work from single-file (.vue file) templates that are run through a preprocessor. Some documentation assumes the use of .vue files and provide self-closing tags in their example code. If you copy and paste self-closing tags from documentation examples into browser-based code they may not work as expected. The solution is to add a separate closing tag for each element.

I recently ran into this problem while trying out bootstrap-vue tables. Using the example code, the b-btn (clear button) in the b-input-group-append would not exist until I closed the preceding b-form-input tag.

Here’s the relevant section from the Vue style guide:
Self-closing components