VueWeekly.dev - Issue #9 - Vue 3.0.0 RELEASED 🚀 🎉
The official release of Vue.js 3.0 "One Piece"
Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.
Hats off to the core team and all those who contributed!
Evan You // Keynote: Live Free Online Announcement // Vuejs Global Online
Evan You will be Live on Friday 18th September to reveal something special for the Vuejs and Javascript Community. Evan You the Creator of Vue will be delivering a keynote Live and Free for the public.
Testing Vue+Apollo: 2020 edition
Almost two years ago I started my dev.to journey with the article about unit testing Vue + Apollo combination. During this time I had multiple requests about mocking an Apollo client and including it to the equation - just like React does with @apollo/react-testing library. This would allow us to test queries and mutations hooks as well as cache updates. There were many attempts from my side to mock a client and finally I am ready to share some examples.
Watch with @vue/reactivity
const state = reactive({
info: {
name: 'Anthony',
}
})
watch(state, () => { console.log('changed!') }, { deep: true })
state.info.name = 'Anthony Fu'
// changed!
As you probably know, the things I excited most in Vue 3 are the Composition API and the reactivity system. With the Composition API we can reuse logics and states across components or even apps. What's better? The underhood reactivity system is decoupled from Vue, which means you can use it almost everywhere, even without UI.
Craft Better Looking Vue Apps Using Tailwind CSS
Today, let’s bundle these two tools while learning how to set up Tailwind CSS with Vue.
Here’s what this tutorial includes:
- Generating a Vue 3 app
- Setting up Tailwind CSS
- Defining data to play with Tailwind -Pushing the configuration further
Quasar v1.14.0 released
New (and important) new features for the Dialog and Notify plugins! Updatable and progress related. Enjoy!
Gridsome Recommender Plugin
Improve churn rate of your Gridsome site by generating post or product recommendations to show users related content they might be interested in.
Analyses your posts and creates relations between similar posts based on text analysis. For more information on the text analysis part visit content-based-recommender.
Vue vs React in 2020: Which Framework to Choose and When
Both tools offer developers a productive approach to building various Web applications, but each has its own best use cases and responds to different business needs. In this article, we’ll explore what those use cases can be, along with perks that make Vue.js and React unique.
SSR Support for AWS Amplify JavaScript Libraries
// pages/_app.js
import { Amplify } from "aws-amplify";
import awsExports from "../src/aws-exports";
Amplify.configure({ ...awsExports, ssr: true });
Modern web frameworks like Next.js and Nuxt.js combine hybrid static site generation (SSG) and server-side rendering (SSR) along with traditional client rendering to enable developers to build fast, modern sites while also providing a great developer experience. These technologies continue to grow in popularity as developers and customers increasingly take advantage of their features like API routes, incremental static regeneration, code-splitting, and good SEO.
BootstrapVue v2.17.3 has been released, which fixes issues introduced with v2.17.0 and minor improvements!
The v2.17.0 updates include:
b-avatar- Add size classes for sm and lg sizes
docs- Auto-detect settings props in component reference
- Launch themes page with first BootstrapVue theme
b-form-file- Improved drag and drop handling
b-pagination/b-pagination-nav- Allow page change to be prevented
b-tags- Add limit prop
b-table- Add sortKey option for no-local-sorting events
...plus a long list of bug fixes :)
Adding Social Media & SEO Meta Data Using Nuxt Content
Now it’s time to add all the important head tags to the main and post templates.
Let’s start with the main site meta data, which will be used in the main template and would also be used as a fallback if any other individual pages do not have the meta content added to them. In the
nuxt.config.jsfile there is a head property, it is here where we will be adding all our data.
State of Nuxt 2020
Sebastien, creator of Nuxt.js will explain the current state of Nuxt for 2020, from version 2 to 3.
@vue/lit 🖖🔥
Proof of concept mini custom elements framework powered by @vue/reactivity and lit-html. The "framework" itself is just ~70 lines of code and the two libraries weigh in at ~6kb min + brotli combined.
The API is almost identical to Vue Composition API, but defines native custom elements underneath.