I am currently in the process of developing a website that utilizes classic multiple pages powered by blade templates. However, I am looking to incorporate vuejs2 components for more dynamic functionalities.
Although things are running smoothly, I am facing a challenge when it comes to declaring containers parsed by VueJs for these components.
I have a need for using numerous components in various locations, but I am unable to designate a large main container as the VueJs container due to conflicts with <script> tags.
Whenever I attempt this, I encounter errors such as:
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.My current approach in my app.js file is as follows:
new Vue({
el: '#need-components-1'
});
new Vue({
el: '#need-components-2'
});
new Vue({
el: '#need-components-3'
});
However, I find this method quite unfavorable. I would prefer to either declare the entire content as VueJs-friendly or utilize a common class or attribute for containers. As of now, I have to assign a new id each time I want to integrate components into a different location. Additionally, VueJs logs console errors for elements that are not always loaded, which can be frustrating.
Is there a more elegant and convenient solution to tackle this issue?
Thank you.