Utilizing CDN script with Shopify: A guide to optimization

I am currently utilizing VueJs in the development of a Shopify theme using Shopify Cli and Store 2.0. To incorporate Vue, I initially attempted to install it through a CDN script within my theme.liquid file.

<script src="{{ 'vue.global.js' | asset_url }}"></script>

While this method allowed Vue Devtools to detect VueJs successfully, it also triggered an error during the theme check:

Missing async or defer attribute on script tag

Upon adding the async or defer attribute to the script tag as suggested, Vue Devtools could no longer detect VueJs properly.

https://i.sstatic.net/fRYbS.png

If anyone knows how to resolve this issue and add Vuejs to Shopify without encountering this error, please provide guidance. Thank you!

javascriptvue.jsshopifyliquidcdn

Answer №1

If you wish to bypass the ParserBlockingJavaScript check for theme.liquid, here's how you can do it:

Within your theme check config file (.theme-check.yml), locate ParserBlockingJavaScript and specify the file you want to exclude, like so:

ParserBlockingJavaScript:
  enabled: true
  ignore:
    - layout/theme.liquid

You also have the option to globally disable this check by setting enabled to false.

Alternatively, you can selectively disable the check for a specific piece of code using the following method:

{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="{{ 'vue.global.js' | asset_url }}"></script>
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}

For more details on the various checks available, visit: https://github.com/Shopify/theme-check

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Following a Node/Npm Update, Sails.js encounters difficulty locating the 'ini' module

While developing an application in Sails.js, I encountered an authentication issue while trying to create user accounts. Despite my efforts to debug the problem, updating Node and NPM only resulted in a different error. module.js:338 throw err; ...

javascriptnode.jsmacosmodulesails.js

Approach for fetching these JSON records

I am currently exploring ways to retrieve all entries within a JSON payload using JavaScript. Specifically, I am interested in finding the best method to extract all instances of "o4" in a specific order (-159, -257). How can this be achieved? { ...

javascriptjson

Is there a reason why I can't load all Google charts on one webpage?

I am trying to use the Google Charts API to display various charts on my web page. However, I seem to be encountering an issue where the last chart is not loading correctly. Can someone point out what I might be missing in my code? I would greatly apprecia ...

javascripthtmljavascript-objectsdom-eventsgoogle-visualization

Issues with BoxWidth configuration in ChartJS causing unexpected results

Check out my demo on JSFidle: https://jsfiddle.net/uniqueusername/example123/ In the chart, there is a noticeable pink box at the top. I'm trying to remove it. Some suggestions I found involved adding the following code: legend: { labels: { ...

javascriptchart.js

In what ways can I enhance and visually improve JSON data using a jquery/javascript plugin?

My current project requires me to display JSON data received from the backend in a textarea. However, the data comes unformatted and not validated. Now I'm facing two main challenges: 1) How can I beautify the JSON content in the textarea? 2) How can ...

javascriptjqueryjsonjsonlint

I am looking to incorporate a new "ID" column into my mui data grid table in ReactJS that will incrementally count from 0 to the total number of rows

When displaying data from an API in a datagrid table component with multiple columns, it is necessary to include a column for the ID which should have values ranging from 0 to the number of rows. Currently, the Object_id is being displayed in this cell. T ...

javascriptnode.jsreactjsmaterial-uimui-x-data-grid

Guide to showcasing an image on an HTML page using HTTP header

I have an HTML page with a basic layout that includes a single button. When this button is clicked, it needs to trigger an HTTP request to a specific URL while including an Accept header for GET requests. The response from the HTTP URL will vary depending ...

javascriptjqueryhtmlajax

Enhancing User Experience with Animated jQuery Progress Bar

I came across a cool tutorial on animating progress bars: The only issue was that the progress bar didn't utilize jquery, and there wasn't information on linking multiple buttons to it. After some searching, I found another tutorial that address ...

javascriptjquerycss

Guide on creating an Iframe in HTML with JavaScript

Can someone help me troubleshoot why the following code isn't working to write an iframe into HTML using JavaScript? <html> <body> <script> document.write("<iframe width="560" height="315" src="https://www.youtube.com/embed/9Ow8 ...

javascripthtmliframe

Why doesn't the Vuex store update the data property of Vue components?

Within the code snippet provided, there seems to be an issue where the c2 property of the component (app.vue) does not update when the increment function updates the counter in the store using this.$store.state.counter++; I am aware that this can be resol ...

vue.jsvuex

Managing responses from ajax requests that can handle both text and json formats

After submitting a form via Ajax and receiving a response from the servlet in either text or JSON format, I'm wondering if there is a way to handle both types of responses. I've read through the jQuery/Ajax documentation, but the JQuery Ajax page ...

javascriptjqueryajax

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Consider you have a list of web addresses: urls: string[] You create a set of requests (in this instance, utilizing Angular's HTTPClient.get which gives back an Observable) const requests = urls.map((url, index) => this.http.get<Film>(url) ...

javascriptangulartypescriptrxjs

Creating synchronicity in your code within the useEffect hook

Is there a way to ensure that my function is fully completed before moving on, even though it's not recommended to add async to useEffect? Take a look at this code snippet: useEffect( () => { const RetrieverDataProcess = async () => ...

javascriptreactjsreact-hooks

The form is refusing to submit even after using the "return false

Even after adding validation to the form, it still submits when the script returns false. The Form Submission <form action=payment.php method=POST name=UserForm id=UserForm onsubmit="return check(this); return false;"> Javascript Code function ch ...

javascriptjquery

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

I have been encountering an error in my code consistently, and I am struggling to comprehend why this is happening. The problematic area seems to be in line 29 of my Javascript file. HTML <link href="Styles12.css"; type="text/css" rel="stylesheet"> ...

javascripthtml

Nuxt.js Development Script Fumbles

Recently, I've been working on a website using Nuxt.js and have been really enjoying the process. However, I'm encountering an error that's puzzling me whenever I attempt to run $npm run dev: 0 info it worked if it ends with ok 1 verbose cl ...

javascriptnode.jsnpmnuxt.js

Issue with Jest mock function failing to trigger axios instance function causing it to return undefined

I initially found a solution on this StackOverflow thread However, I wanted to add my own helper function that generates a fresh Axios instance with the user's authentication token. Here is what I came up with: import axios from "axios"; c ...

javascripttypescriptunit-testingaxiosjestjs

Sharing a Twitter thread using Twit library with Node.js

I have been using Node.js along with the npm Twit module to post tweets on Twitter, and while it works for a single tweet, I am facing issues when trying to post multiple tweets as a thread. When attempting to post a series of tweets together, they do not ...

javascriptnode.jsnpmtwitter

Utilize a global variable in Vue.js

How can I efficiently pass a javascript variable globally to Vue components upon instantiation so that each registered component has it as a property or it can be accessed globally? Please note: I need to ensure that this global variable for vuejs is set ...

vue-componentvue.jsvuejs2

Explore search results that include values nested within map arrays

I have an array with multiple objects, each containing a nested array of subValues. My goal is to filter components based on search criteria. While I can successfully search the parent level objects' values, I am struggling with filtering based on the ...

javascriptreactjs