search

uicrooks / shopify-foundation-theme

Modern Shopify theme using Shopify Theme Lab, Liquid, Vue and Tailwind CSS 🎨
https://uicrooks.github.io/shopify-theme-lab-docs
MIT License
292 stars 104 forks source link

Modular Vue Apps throughout pages #50

Closed patrickbjohnson closed 3 years ago

patrickbjohnson commented 3 years ago

Operating system

Mac Big Sur 11.5.2

Node.js version

14

Shopify CLI version

2.0

Browsers

Chrome

Version

4 (Current)

Modifications

No.

Details

Not a bug but curious if the team has thought about shifting the vue app init approach. As of now it seems as though a vue app is mounted on each page at load. The vue app mounts on the entire page wrapping all functionality.

We've noticed in some of the sites we've built that this conflicts with 3rd party app scripts and initializations, even on pages in which we don't need or use any vue functionality.

Love the starter your team has created and just wanted to know if this has been considered :)

Notice

sergejcodes commented 3 years ago

I doubt there is a simple solution that wouldn't overcomplicate the architecture. Currently, the Vue initialization is basically automatic, because of the whole-page-wrap and contributes to the overall ease of use.

I'll have to look into it. Can you name the conflicting plugin(s)?

patrickbjohnson commented 3 years ago

We've seen this pop up mostly with Recharge as they generate login pages that become apart of the Shopify code base, although they are not ones that we have locally.

We've also seen this with other apps that inject scripts into the body or generate pages they need to run. Since Vue.js likes to yell/break when other JS scripts are injecting that is where we see the problem.

sergejcodes commented 3 years ago

The latest release now includes modularity functionality. You need to update your main.js file to use it. It's now possible to have multiple Vue instances on the same page. Read more about it in the docs.