Starting a Project Vue 2

Question

If I Want to do a project in Vue 2 which template or libraries would be interesting to use?

Also which database, language, backend framework or else integer in Vue 2 with Node?

State your opinions if you want.

Answer 1

I’ve seen some frameworks of components for Vuejs2 and the ones I enjoyed most working on are:

1. Vuetify, being this one framework components with Material Design;

In the case of Vuetify, it is extremely complete, basically everything I’ve ever needed to build a system/site it has. It has an easy understanding of its components. Great documentation (very complete, accurate and consistent). Constant updates (recently released for version 1.0.0). Active community, always contributing and helping. And also, I really like the Material look, so it turns out to be more of a bonus.

2. Buefy (Framework UI based on Bulma) + Bulma (Framework CSS based on Flexbox).

In the case of Buefy, there are far fewer components, but its use and the amount of code required ends up being much smaller and simpler in my view, but it manages. I use it for sites that have your custom look, IE, can not be Flat, Material, etc. He works directly with Bulma, where there are elements that are worked only as classes in Bulma, not being customized in Buefy, unlike Vuetify, for example, there is no b-button of Buefy, the button you will not find in Buefy but in Bulma, being it only a class to keep the look, where you find in the tab Elements inside the Bulma.

In the case of Bulma, its syntax is similar to a bootstrap, but even simpler, being all written basically with is or has, such as, for example: is-size-1, has-text-Grey. Very simple, of course, quick learning curve for you and the team members. It is also flexbox-based, and its use for responsive systems is also very simple.

Templates and libraries

In the case of Templates and libraries, it is complicated to say which ones to use, it will actually vary from project to project. Using Yarn or npm, you will install the dependencies as needed. Working the frameworks mentioned earlier, I like to use css pre-processors like Stylus or SASS, where they provide greater readability of your CSS, a reuse of CSS, ability to use css methodologies more easily, such as WELL, among other possibilities. Another dependency that I usually install is the PUG, an HTML preprocessor, which is similar to CSS, where in the case of HTML the tags know that one is inside the other by their indentation, and there is no tag closure. I particularly recommend it because in the case of Vuejs 2, HTML usually stays in the same code as CSS and JS. Without tag closing, you drastically reduce in some cases the amount of lines in your tag <template>. There are also several other advantages, such as the no need to write Ivs and classes directly, and I think the code gets smaller and clearer to perform a maintenance on it. Some say the PUG’s biggest problem is when the <template> It gets big, but I think if in a Vuejs component you own a <template> very large, you probably did something wrong, and it could be "divided" into other smaller components.

Database and back-end language

I am a front-end developer, so I don’t have much knowledge in this area, but I see that also the choice of both is according to the project. With Vuejs2 I like working with the Laravel 5.5+, for it is a framework extremely complete and accepted by the community, and has an excellent compatibility between both. In a short time, you can make an API for a CRUD (for example), with Migrations for the database, authentication, etc. There is also how to perform automated mock tests (Factorys), using the phpunit, ensuring that your back-end works as expected. It also has the Composer which is a package manager, where you will find great packages upon your need.

In the case of Nodejs that you mentioned, I have already briefly used the Adonisjs, being this one framework for Nodejs who in my opinion offers virtually the same advantages of Laravel, but with the advantages of Nodejs.