Creating customized, repeatable HTML elements cuts down on the amount of code you have to write. It also adds organization and readability to your codebase. So how does one create custom HTML elements? Vue.JS provides an elegant solution.
Including Vue in your project is as easy as copying and pasting the following script: <script src=”https://unpkg.com/vue/dist/vue.js”></script>. Do note that you’ll want to include the tag (and reference to your own .js file of course) between the closing </body> and </html> tags. Putting the tags there will allow for the body to load up before calling the scripts.
Next, you’ll want to add an HTML element for Vue.JS to target; simply add a div element with id=”vue”.
Now we’ll use Vue’s component method to create our custom HTML.
Note: You’ll want to call the component method BEFORE the new Vue instance. 2 Arguments are passed 1) the name of the custom element, and 2) an object containing a template with the HTML.
With the HTML, you’ll want to start with a single top-level element that contains everything else. It makes sense to use a div, and it also makes sense to give that div an id (or class name) that matches the name of the custom element. Doing so allows for easy CSS targeting. Lastly, it’s advisable to use template literal syntax for clean formatting.
Now for the good stuff; let’s get that custom HTML going! For this example, I’m going to go with a simple custom banner element.
You can write in whatever valid html you want. The final step is to put the custom element tags (i.e., the name you passed to the component method) in the target element HTML (e.g., <div id=”vue”></div>). Make sure to click on the HTML tab in the preview above to see what that looks like. Notice that you only need to use the custom element tags 1 time in order to render all of the HTML.
So there you have it. With Vue.JS, creating customized reusable HTML is a snap. As always, thank you for reading… Stay tuned for more!
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.Read more
Why your best tech talent quits
Your best developers and IT pros receive recruiting offers in their InMail and inboxes daily. Because the competition for the top tech talent is so fierce, how do you keep your best employees in house?Read more
Technology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.Read more