Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

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

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

Hi 👋

Update: I'm already available from 28th November 2022 for Vue freelance projects.

This newsletter is now also available as RSS feed: https.//

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

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

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

Check Which dist file to use? for more details.

Curated Vue Content

🤩 Advent Of Vue

👉🏻 An email-delivered set of festively-themed coding puzzles built around building Vue components by a group of well-known Vue developers.

📕 Refresh-proof your Pinia Stores

👉🏻 Pinia, Vue's state management library, does not automatically persist application state.

👉🏻 In this tutorial, Daniel explores three different ways to refresh-proof your Pinia stores.

📕 Juggling Vue.js Refs

👉🏻 Abdelrahman found some simple yet significant improvements around passing refs that can be useful for you to use in your next app.

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

Curated Web Development Content

📕 Exploring the repository pattern with TypeScript and Node

👉🏻 The repository pattern can be defined as an abstraction over data storage, allowing the decoupling of data access logic from the business logic.

🛠️ TypeScript-JSON

👉🏻 TypeScript-JSON is a transformer library that provides JSON-related functions.

👉🏻 It features powerful runtime type checkers and a fast JSON.stringify function guarded by type validation.

😆 Rendering Doom with Emojis 😆 Rendering Doom with

👉🏻 "I don’t think anybody wants to play the game like that, but it certainly looks cool"

🛠️ Pokemon Deckz 🛠️ Pokemon

👉🏻 Come bring your nostalgia and check out how advanced CSS can make realistic holographic-looking cards in the browser!

🛠️ Lucide 🛠️

👉🏻 A beautiful and consistent icon toolkit.

👉🏻 The collection has 836 icons and it is still growing.

👉🏻 Lucide was created after the Feather Icons project appeared to be abandoned.

🛠️ Creepyface 🛠️

👉🏻The JavaScript library that makes your face look at the pointer.

👉🏻 Supports React and Custom Elements.

Quote of the Week

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 All rights reserved.