I am using Polaris components inside Shopify store but the AppProvider is breaking the existing styles of Shopify store. When i try to render normal react component that is working fine but when i use Polaris component which i have to wrap inside AppProvider, the existing page styling breaks.
Polaris version is
"#shopify/polaris": "^10.12.0"
AppProvider is breaking the existing styles.
Related
I have an Electron app based on Vue3 SFCs. I created a separate Vue component for printing; I load it using createSSRApp and create the HTML string to print with renderToString. It basically works, but the HTML string does not contain any of the styles defined in the print component's <style> section.
The HTML string is loaded into a new Electron BrowserWindow like this:
printWnd.loadURL("data:text/html;charset=utf-8," + encodeURI(html))
This leads me to another problem: when I try to load assets from the package, e.g. CSS or fonts, the chromium engine in Electron complains about not wanting to load them since they are being referred to from a privileged level.
How can I load styles and assets into this print HTML? Or should I try a totally different approach for printing?
From this Shopify article Integration with the theme editor, it said that:
When merchants customize sections, the HTML of those sections is dynamically added, removed, or re-rendered directly onto the existing DOM without reloading the entire page.
JavaScript that runs when the page loads will not run again when a section is re-rendered or added to the page. This poses a problem for any custom scripts that would need to be re-run.
I am trying to use Vue 3.x in Shopify theme sections. When a section setting is changed, the section variable is changed (like {{ section.settings.button_color }}. However, the js is not run again, how can I load this updated section value into Vue app?
I'm trying to create a sweetalert2 that that renders a component that uses vuetify elements, is that possible?
I have already tried using swal's HTML and that doesn't work
I want to be able to render a vuetify form component from a sweetalert2 pop-up.
I have an application in vue with typescript. I saw when I use import to load component then I got component-bundle with all the code of component inside.
I wonder if should I do this for every component I want to load, for example: I have app.vue inside I have toolbar.vue and drawer.vue. in my router components I have others vue components.
What I'm afraid that gonna happened is app.js is loaded then components inside the route definition(500k), then I get the toolbar component (1.5mb). and I'll get flashing screen weird.
So, should I use splitting bundle for every component in my app?
You can do code splitting if you are not expecting that particular component to be re-used for every page.
Take for example the Header and Footer component. Since they will be used in almost all of the pages, there is no reason to code split as you want it to be loaded along with the bundle for all pages.
Take for example you have a component where it has a Blog Widget. This component will only load in the /blog page. Therefore, this is a good use case to be using code splitting as you do not need the Blog Widget to be bundled in other pages except in the /blog page.
I can only provide you with a generic answer and using the Header and Footer components are the best way to express different use cases. As for the rest of the components, you have to decide for yourself if it is worth to code split or not.
I want to create a SPA with the white labeling capability and I am wondering if there is a way for me to dynamically change the styles tag inside a single page VueJS component?
I think I can manage the template dynamically by using something like
<div v-if="condition"></div>
But is there similar scheme available for styles ?
Can it be done without using Server Side Rendering?