Weekly Vue News

By Michael Hoffmann

Weekly Vue News - #67 - Use Vue Without Build Step





Subscribe to our newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy and understand that Weekly Vue News will receive your email address.

Michael Hoffmann
Michael Hoffmann
Hi 👋
Update: I’m already available from 28th November 2022 for Vue freelance projects.
This newsletter is now also available as RSS feed: https.//weekly-vue.news/rss.xml
It is official, Nuxt 3 is going stable on Nuxt Nation this week from 16 & 17 November 2022.
I currently have three web apps running on the latest Nuxt 3 release candidate:
This week I will work on new content & fixes for the three projects mentioned above ☺️
Have a great week ☀️

Vue Tip: Use Vue Without Build Step
Vue can be used as a standalone script file - no build step required!
Some typical use cases:
  • You don’t want to add the complexity of a build step as your frontend logic is not very complex
  • You are using a backend framework that is rendering most of the HTML
The official docs describe Vue without a build step as “a more declarative replacement of jQuery”.
To avoid the build step, we can load Vue directly from a CDN via the script tag:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
In our example, we use unpkg as CDN to fetch the npm package. Of course, you can use any other CDN that serves npm packages or download the file and serve it yourself.
The CDN link loads a global build of Vue. This build exposes all top-level APIs on the global Vue object. Let’s take a look at a working example:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
I deployed this index.html to Netlify: Check it out
⚠️ Notes on Production Use
When deploying to production you should make sure to use the production builds (dist files that end in .prod.js):
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Check Which dist file to use? for more details.
Curated Vue Content
TypeScript Tip: Optional Function Call
There is often a time when you want to call a callback function inside a function. These callback functions are, most of the time, optional. So you’ve to check whether it’s defined or not to avoid <function name> is not callable kind of error.
This is where the optional function call using optional chaining comes to play:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Curated Web Development Content
😆 Rendering Doom with Emojis
🛠️ Pokemon Deckz
🛠️ Lucide
🛠️ Creepyface
Quote of the Week
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany