Creating a Single-page Application with Vue + Vue Router is dead simple. With Vue.js, we are already composing our application with components. When adding Vue Router to the mix, all we need to do is map our components to the routes and let Vue Router know where to render them. Here's a basic example:#
The context provides additional objects/params from Nuxt to Vue components. The context is available in special nuxt lifecycle areas like asyncData, fetch, plugins, 'middleware', 'modules', and 'nuxtServerInit`.
You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements. It automatically picks the correct way to update the element based on the input type. Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases.
When I started collecting information about SSR (server-side rendering) with Vue, I had to get pieces from different articles as well as the official documentation to get a complete understanding of the subject.Here are some problems I found in these sources:A lot of assumptions about information that you should have, like Webpack configuration, the proper way to hook up Vue Router etc.Lacking certain important information and leaving some gaps for the reader to fill in.In the examples given, most don't follow the standards and best practices provided by the official documentation.The objective of this article is to provide all the information you may need to get SSR working with Vue Router, making an extra effort to avoid any gaps that may give you a headache later. I also try to respect all the Vue team's recommendations.
Following various tutorials and guides, I was able to get basic SSR Vue working with Webpack, the problem is I can't seem to be able to pass server data/context to the app. I'm using Vue SSR Renderer's bundle renderer. My express /router.js looks like this:
Even though I’ve been working on VueJS for a while now, I never needed to publish a component on npm. The reason we’re doing it now is because we build applications for Flock, and it gets pretty crazy rewriting components in different applications. The third time I was developing an application using Vue.js, I felt that we needed some highly configurable yet reusable components.
Vue components by nature are meant to be re-used. This is easy when the component is only used within a single application. But how can you write a component once and use it in multiple sites/applications? Perhaps the easiest solution is via npm.
If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:
This loader pre-compiles a html template into a render function using the vue-template-compiler. Each html file is transformed into a function that takes a vue component options object and injects a render function, styles and HMR support.
Webpack is an essential tool for developing Vue.js single page applications. It makes your development workflow much simpler by managing complex build steps and can optimise your apps size and performance.
Welcome to this new series/course! The goal of this series is that we’re going to take a simple VueJS project and upgrade it to use Typescript! You may wonder, “why to use typescript in my VueJS project if I’m fine with the good old fashioned way?” The answer is simple. There are sometimes that our project can get bigger than we expected and creating new features or a simple refactor could scare us. This is because, most of the time, we don’t have any idea if something else gets broken or how many files need to change to put our feature/refactor in place.
As it states in the Bunny Theory of Code, the code tends to multiply in a quick way. And even with such great tools as Vue and Vuex it’s easy to make a mistake that might grow later all over the project. Here I will talk about Vuex and its getters, and how they might be used in a wrong way. And while dealing with that, I tried to figure out what Vuex getters are good for and how they work under the hood.
If there're dependencies installed by npm link or yarn link, ESLint (and sometimes Babel as well) may not work properly for those symlinked dependencies. It is because webpack resolves symlinks to their real locations by default, thus breaks ESLint / Babel config lookup.