Weekly Vue News - #67 - Use Vue Without Build Step
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:
- mokkapps.de: My portfolio website
- codesnap.dev: Tool to create the code snippet images I use for this newsletter
- weekly-vue.news: Website for this newsletter
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
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
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
Check Which dist file to use? for more details.
Curated Vue Content
👉🏻 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.
👉🏻 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 CodeSnap.dev
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 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 — crocidb.com
👉🏻 "I don’t think anybody wants to play the game like that, but it certainly looks cool"
🛠️ Pokemon Deckz — deck-24abcd.netlify.app
👉🏻 Come bring your nostalgia and check out how advanced CSS can make realistic holographic-looking cards in the browser!
👉🏻 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.
👉🏻The JavaScript library that makes your face look at the pointer.
👉🏻 Supports React and Custom Elements.
Quote of the Week
