Smart layouts for VueJS. Debug IE 11. This is a post borne out of frustration.
Vue.js WebSocket Tutorial. I love playing with WebSockets, they are a very cool bit of technology that allow for incredibly efficient two-way (duplex) communication over a single long-lived TCP connection.
In this tutorial, we are going to be exploring the wonderful world of WebSockets and how you can integrate them into your Vue.js applications by building a really simple app that utilizes WebSocket connections. Video Tutorial If you prefer, this tutorial is available in video format! Setting Up Our Project. Provide / Inject in Vue.js.
Awesome breaking changes in Vue 3, if you migrate from Vue 2. Heya!
Thanks to the Vue Core team, we can try out the most anticipated Vue 3 which has a lot of great improvements and features to look forward. Currently it's in the beta release, and if you want to get hands-on with the latest changes you can try to install it and followup the changes in their github release. As a VueJS developer, I have experienced the current code implementation of Vue 2, and when I tried the Vue 3, I noticed there are some breaking changes. But don't get me wrong, I personally like the breaking changes as I believe it will help to improve the code quality and lesser chance of unexpected bugs. Also, these breaking changes are coming from the agreed RFC by the Vue Core team, so check them out for more detail. Alas, here we go! In the Vue 2, usually the plugin installation will be done in the global instance of the Vue object, and then we create a new instance of the Vue to initialize the Vue app.
Theming in Vue single file components. There are situations where it’s beneficial to build different CSS files for the same web app.
The Ultimate Vue.js & Laravel CRUD Tutorial. CRUD (Create, Read, Update and Delete) are the basic operations of data storage, and one of the first things you learn as a Laravel developer.
But what happens when you add a Vue.js single-page app as the frontend to this the stack? Suddenly you have to deal with asynchronous CRUD, since operations now occur without a page refresh. This will require special attention to ensuring the state of the data is consistent in both the front end backends. In this tutorial, I'll show you how to set up a full-stack Vue & Laravel app and demo each of the CRUD operations. AJAX is the key to this architecture, so we'll use Axios as the HTTP client.
VueJS — Tips & Best Practices - Vue.js Developers - Medium. Anyway, let’s get to it.
When working with Vue, it’s impossible to live without VueDevtools. Functional components. In this post, you’ll learn about functional components and find out how to use stateless components in your workflow in Vue.
Before you start You will need the following in your PC: Node.js version 10.x and above installed. You can verify if you have this version of Node.js by running the command below in your terminal/command prompt: [TODO] Deploy a blog using Cosmic JS + Vuetify to Netlify. [BEST] VueJS — Tips & Best Practices - Medium. Using the New vue-cli 3 to Scaffold Vue.js Apps. Use Any Javascript Library With Vue.js - Vue.js Developers. Lodash, Moment, Axios, Async...these are useful Javascript libraries that you'll want to utilise in many of your Vue.js apps.
But as your project grows you'll be separating code into single file components and module files. You also may want to run your app in different environments to allow server rendering. Unless you find an easy and robust way to include those Javascript libraries across your components and module files they're going to be a nuisance! How not to include a library in a Vue.js project Global variable. Vue.js Application Structure and CSS Architecture - Markus Oberlehner. In recent days, I thought a lot about structuring large scale component based applications.
Oftentimes, at the beginning of a project, everything seems to be easy. You build a couple of components, put them together and without too much effort you’ve implemented the first feature of your application in a reasonable amount of time. Deceived by the project’s rapid progress, you think, now that you already have a bunch of components, developing the next feature must be even easier and faster. But more often than not, it’s more complicated than that. You realize that the components you’ve built, are not that generic as you thought they are. Globally Load SASS into your Vue.js Applications. In the CSS world, we can see plenty of great preprocessors that improve the language, being SASS/SCSS, LESS and PostCSS the most common among them.
SASS seems to be still the most popular and used solution by the date of writing, and that's no surprise since it's fully featured and extends the CSS language with an easy to understand syntax. Thanks to vue-loader, Vue allows to use any of these solutions just by adding the lang="scss" property with the desired language to the style tag in single file components: As a project grows up, you start separating your SASS variables, mixins and functions in separate files. You can import them by using the @import instruction: So far so good, but the thing is that in every component that we want to use a variable, mixin or function we have to import those files, becoming a very repetitive task and ending up with the following lines repeated all across your components: <style lang="scss"> @import ". Loading global SASS in the vue-cli npm install Caveats.
Organize and decouple your API calls in Nuxt.js. As your Nuxt app grows, so does your backend. With time, your API evolves from a hand full of endpoints into an enormous jungle of resources. And you want to stay the king of the jungle! That means not losing track of the different (RESTful) endpoints and organizing them properly. Tests with Jest and Nightwatch. Testing is a vital part of the development cycle and a part of life for programmers and developers. Nobody likes bugs in their code, but they're incredibly annoying when you think your project is done and ready for deployment. But inevitably, someone will find a way to break your code: a certain function has an unforeseen edge case that doesn't work, going to pages in an unpredicted sequence can result in weird outputs, etc. Implementing an Infinite Scroll with Vue.js.