Posts tagged with vue
? Symmetry in naming is a powerful tool I never gave the weight it deserves. Embrace the visual relation! A common example in Vue: pic.twitter.com/QEBbHDUvWY
— Caleb Porzio (@calebporzio) November 9, 2017
Read more [twitter.com]
The maintainers of Vue.js have recently published their official style guide.
This is the official style guide for Vue-specific code. If you use Vue in a project, it’s a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don’t believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values.For the most part, we also avoid suggestions about JavaScript or HTML in general. We don’t mind whether you use semicolons or trailing commas. We don’t mind whether your HTML uses single-quotes or double-quotes for attribute values. Some exceptions will exist however, where we’ve found that a particular pattern is helpful in the context of Vue.
https://vuejs.org/v2/style-guide/
Want to see some more style guides? At Spatie we have a guidelines site containing styleguides for Laravel and JavaScript.
This site contains a set of guidelines we use to bring our projects to a good end. We decided to document our workflow because consistency is one of the most valuable traits of maintainable software.The contents of this site exist for ourselves—more importantly, our future selves—and for giving future collegues a reference to our way of doing things and their quirks. The guidelines cover workflow, code style, and other little things we consider worth documenting.
Join 9,500+ smart developers
Every month I share what I learn from running Spatie, building Oh Dear, and maintaining 300+ open source packages. Practical takes on Laravel, PHP, and AI that you can actually use.
No spam. Unsubscribe anytime. You can also follow me on X.
On the vuejsdevelopers.com blog Anthony Gore suggested a few cool Vuex plugins that could come in handy.
There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it’s really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a tonne of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.In this article, I will show you five feature that you can easily add to your next project with a Vuex plugin.
Most of work is done in PHPStorm. On my current project I do a lot of Vue stuff. Regularly use PHPStorm auto format feature to make the code look nice. One thing that was bothering is that by default it will use 8 characters of indentation for Vue component properties. So you get this horrible code:
<br /><template>
<!-- ? -->
<my-component
myProp="myValue"
anotherProp="anotherValue"
></my-component>
</template>
Today a golden tip by Christopher Pitt helped me find the solution. In the preferences of PHPStorm you need to set continuation indent of the html to 4 characters.
And after that the PHPStorm will reformat the code right according to our guidelines for Vue templates.
<template>
<!-- ? -->
<my-component
myProp="myValue"
anotherProp="anotherValue"
></my-component>
</template>
At beginning of the summer we released a new Vue component called vue-table-component. Our aim was to create a very easy to use Vue component to render a table with data. You can toy a little bit with the component on the demo page. Recently Seb and I worked on two cool new features which I want to…
An official toolset for testing Vue components will be released soon. In a new series Jover Morales tells you all about it.
vue-test-utils, the official VueJS testing library and based on avoriaz, is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.Jest, on the other side, is the testing framework developed at Facebook, which makes testing a breeze, with awesome features such as:
- Almost no config by default
- Very cool interactive mode
- Run tests in parallel
- Spies, stubs and mocks out of the box
- Built in code coverage
- Snapshot testing
- Module mocking utilities
Recently I needed to add some global functionality to nearly all Vue components in an app. My colleague Seb told me a good way to achieve this: global mixins. In this post I'd like share that knowledge. In Vue a mixin is some functionality bundled in a file that can be added to one or more Vue…
In a new post on his blog Sebastian De Deyne, JavaScript (and all-round) wizard at Spatie, describes a technique to expose Vue components as a plugin.
We recently published a tabs package. Initially, users needed to register two components in order to create a tabular interface: Tabs, which acts as a container, and Tab, which defines a single tab and its contents in the interface.Since developers are most likely going to use both components together, and there's a fair chance that they'd want to register them globally like in the example, it made sense to provide some sort of auto-install option.
https://sebastiandedeyne.com/posts/2017/exposing-multiple-vue-components-as-a-plugin
At Spatie we have a tv screen against the wall that displays a dashboard. This dashboard displays the tasks our team should be working on, important events in the near future, which music is playing at our office, and so on. Here's what it looks like: We've opensourced our dashboard, so you can view…
Today we released our newest Vue component called vue-table-component. It aims to be a very easy to use component to make tables filterable and sortable. In this post I'd like to tell you all about it. Why creating yet another table component? Let's first touch upon why we created it. To make lists…
Ivan Sieder offers a nice tip on how to write better v-for loops in VueJS component templates.
There is really nothing wrong with the above code, but there is a small aspect, which really bugs me. As you can see, we are repeating the product identifier inside the output twice ({{ product.name }} and {{ product.price }}).We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality. The feature we are going to use is called destructuring assignment. Basically, what the destructuring assignment allows us to do, is to pull a specific property off of an object and store it in a variable.
https://simedia.tech/blog/vue-js-destructuring-assignment-for-loops/
On April 22nd Laravel Nigeria held its first meetup. It was a big success with over 150 developers showing up.
Here's a recap written by Neo Ighodaro, the organiser of the meetup: https://blog.devcenter.co/building-the-laravel-nigeria-community-with-over-150-attending-the-first-meetup-c919d5ca373c
The talks of the meetup were recorded, you can watch them here:
Welcome to part 5 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing Creating an instance of a component More tests and faking time Jest awesomeness and a skeleton to get started (you're here) Jest watch…
Welcome to part 4 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing Creating an instance of a component More tests and faking time (you're here) Jest awesomeness and a skeleton to get started More tests…
Welcome to part 3 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing Creating an instance of a component (you're here) More tests and faking time Jest awesomeness and a skeleton to get started Creating…
Welcome to part 2 of a series on how to test a Vue component. Here's the table of contents of the series: Starting out with tests The first test and snapshot testing (you're here) Creating an instance of a component More tests and faking time Jest awesomeness and a skeleton to get started Setting up…
Recently we released vue-tabs-component, a simple Vue component to render a tabular interface. If you want to know more about to the component itself I suggest you head to the introductory post on it. Like with the vast majority of our open source work this package comes with tests. In this series…
Last week my company released a vue-tabs-component, a quality Vue component to easily display tabs. You can view a demo of the component here. In this post I'd like to tell you all about it. Why we created it If you're just want to know what the component does, skip to the next section. Nearly all…
Stefan Moises compares a few popular Vue datatable components.
To "get into" Vue.js, I am going to compare different "datatable" solutions I came across and which I found promising. In the past, working with jQuery and mainly AngularJS (1 and 2) and also JAVA frameworks like Grails it was always very difficult and cumbersome to find a really good datatable, which was easy to use, stable and had all the features the projects needed.
http://www.rent-a-hero.de/wp/wp-content/uploads/2017/04/vuegrid
Joshua Bemenderfer gives a nice overview on the ways Vue components can communicate with each other.
There are several methods that can be used for inter-component communication in Vue.js. Normal props and events should be sufficient for most cases, but there are other methods available at your disposal as well.