Posts tagged with vue

The official Vue.js style guide

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.

https://guidelines.spatie.be

Read more

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.

Five Vuex plugins for your next project

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.

https://vuejsdevelopers.com/2017/09/11/vue-js-vuex-plugins/

Read more

Formatting Vue component properties in PHPStorm

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>

Read more

Our vue-table-component got some nice improvements original

by Freek Van der Herten – 3 minute read

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…

Read more

Unit testing Vue.js components with the official Vue testing tools and Jest

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

https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

Read more

Using global mixins in Vue.js original

by Freek Van der Herten – 2 minute read

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…

Read more

Exposing Multiple Vue Components as a Plugin

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

Read more

A straightforward Vue component to filter and sort tables original

by Freek Van der Herten – 3 minute read

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…

Read more

Using destructuring assignment in for VueJS loops

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/

Read more

Testing a Vue component part 4: more testing and faking time original

by Freek Van der Herten – 6 minute read

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…

Read more

Testing a Vue component part 3: Creating an instance original

by Freek Van der Herten – 4 minute read

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…

Read more

Testing a Vue component part 2: the first test and snapshots original

by Freek Van der Herten – 4 minute read

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…

Read more

Testing a Vue component part 1: getting started original

by Freek Van der Herten – 4 minute read

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…

Read more

A Vue component to display tabs original

by Freek Van der Herten – 3 minute read

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…

Read more

Comparing vue.js datatable components

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

Read more