Vite with Laravel: Using Vue.js
2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #vue
How to set up Vue.js in Vite with Laravel.
2021-03-22 #laravel #vite-with-laravel #frontend #build-tools #vue
How to set up Vue.js in Vite with Laravel.
For the past three years, I've been using both React and Vue in different projects, ranging from smaller websites to large scale apps.
Last month I wrote a post about why I prefer React over Vue. Shortly after I joined Adam Wathan on Full Stack Radio to talk about React from a Vue developer's perspective.
We covered a lot of ground on the podcast, but most things we talked about could benefit from some code snippets to illustrate their similaraties and differences.
This post is a succinct rundown of most Vue features, and how I would write them with React in 2019 with hooks.
I had the honor to be a guest on Full Stack Radio with Adam Wathan.
We talked about why I prefer React over Vue — which I wrote about two weeks ago — and how to implement some patterns that Vue provides out of the box but aren't explicitly available in React. Examples include computed properties, events and slots.
Adam's quote:
In this episode, Adam talks to Sebastian De Deyne about learning React from the perspective of a Vue developer, and how to translate all of the Vue features you're already comfortable with to React code.
Tune in on fullstackradio.com or on your favorite podcatcher!
Vue is the default JavaScript framework for Laravel apps. Being part of the Laravel community, I often get the question why I prefer React, so I've decided to write down a few standout reasons.
One of the best things about Vue templates is the special v-model prop. v-model allows you two quickly map prop getters and setters without breaking unidirectional data flow. Props down, events up.
I have a specific pet peeve with user interfaces: things that draw my attention when they don't need to. In any graphical interface, movement is distraction. Our eyes are naturally drawn to anything in motion.
Motion is a powerful tool. We can abuse this distraction to attract our users to a certain place: a notification, an added list item after a background refresh, etc. Let's look into the movement behind a form submission. Below are three dummy forms, each with a different server response time.
In my most recent project at work, I'm experimenting with JSX templates in Vue. Vue offers first-party support for JSX with near-zero configuration, but it doesn't seem to be commonly used in the ecosystem.
Today I was writing a form component that needed an optional back button. Since the form component is generic, the back button could point to anything.
Quick Vue tip for package authors! If you publish a package that exposes multiple Vue components, you can write a small plugin to install them all at once.
Vue 2.0 introduced it's own virtual DOM implementation. At first sight, this doesn't seem to have a large effect on the way you write templates.