I'm trying to use VueJs to develop a Shopify theme using Shopify Cli and Store 2.0. I tried to install Vue using a CDN script in my theme.liquid
<script src="{{ 'vue.global.js' | asset_url }}"></script>
When I use it like that everything works fine and Vue Devtools detects VueJs but I get this error in theme check
Missing async or defer attribute on script tag
When I add async or defer attribute to my script tag Devtools doesn't detect VueJs anymore
How can I add Vuejs to Shopify without getting this error, please?
You have the option to ignore theme.liquid for ParserBlockingJavaScript check.
In your theme check config file (.theme-check.yml), find ParserBlockingJavaScript and add the file you want ignored. In your case:
ParserBlockingJavaScript:
enabled: true
ignore:
- layout/theme.liquid
or you can choose to disable that check globally by changing enabled to false.
But another option for you to only disable the check for that specific code:
{% comment %}theme-check-disable ParserBlockingJavaScript{% endcomment %}
<script src="{{ 'vue.global.js' | asset_url }}"></script>
{% comment %}theme-check-enable ParserBlockingJavaScript{% endcomment %}
You can find more information here regarding the different checks: https://github.com/Shopify/theme-check