I started playing with Vue in June of this year and got into Nuxt within a few weeks. These are general tips that should help both beginners and slightly more experienced developers. I've tried to link the tips to the relevant part of the Vue / Nuxt docs.
Please feel free to add more tips in the comments!
General Vue tips
1. Pass data using props from parent to child components
One of the first things you'll learn is that parent-child data-binding is not two-way and any changes you make to data inside the child component will either throw a warning (or error if using Vuex the wrong way) and result in some massive confusion. So use props instead.
2. Always emit events to pass events + data from the child to parent components
Child components talk to the parent using events. That's how you can propagate clicks, inputs, as well as data back to the parent if required. Vue docs link
3. Use the .sync modifier for two-way data binding between parent and child
Well, yeah - you can technically have two-way data binding between parent and child components. Good use cases for this would be to open or close modals using just one variable synced between the parent and child. The .sync modifier to your rescue. You can find many instances of this used in Buefy
4. Use v-key to force reload a component's state
Due to how Vue's reactivity works, you might end up in a situation where you want to reload a component so that it shows the latest data available instead of some previous data. There are some awesome articles online about how to do this. One of the best ways, is to use the v-key attribute.
This is especially useful when your data is deeply nested or schema-less and Vue is not "reactive" to it.
<template>
<div>
<some-component :data="someData" :key="reloadKey"></some-component>
</div>
</template>
<script>
export default {
data(){
return {
someData: []
reloadKey: 0
}
},
methods: {
// Imagine this method is called by some external JS
// in the callback and now the data needs to be reflected
// in the component
someCallback(data){
this.someData = data;
this.reloadKey++:
}
}
</script>
The article where I learned this from.
5. Use computed properties to access Vuex stores
Instead of writing long and arduous lines of text whenever dealing with Vuex, simply use computed properties to get the data instead.
computed: {
users(){
return this.$store.state.users.data;
},
projects(){
return this.$store.state.projects.data;
}
}
And you can simply use these as this.users or this.projects like you normally would for data.
6. Use vuex-persist or localforage to persist data across browser reloads / closes
vuex-persist lets you keep your Vuex store data on browser reloads (acting as a cache of sorts). It also has a localforage option that lets you persist data to IndexedDB using localforage.
7. Use the built-in transition tag
Vue has really good transition support. Before you try out a custom solution, play with the transition system that Vue gives you out of the box (along with a library like animate.css).
8. Don't create components for every little thing
This is more of an opinion rather than a tip.
Vue's component system is really nice and it's super tempting to create components for every "standalone block" of code you find, but DRY is only useful when you are actually repeating yourself. If the "component" you are making is only going to be present in one place...don't make it a component.
General Nuxt tips
I absolutely love Nuxt. It handles routing out of the box, provides a flexible but effective structure to a project, lets you generate SSR as well as static sites, and comes with a lot of good support from the community.
1. nuxt.config.js is awesome
The nuxt.config.js file can do A LOT of things. Read the docs to understand its uses properly first before trying any configurations independently
2. Understand Nuxt routing
Nuxt routing with pages > route-name.vue is quite easy to understand, but there are ways to extend routes using your own data too. Check out this Nuxt doc page. Psst... the configuration is done in nuxt.config.js!
3. The base template
Nuxt loads all your layouts+pages into a file called app.template.html (look for it in .nuxt > views). You can override this file (e.g. to add Netlify forms which are populated before the build step) by adding an app.html file to the root folder. You can basically copy .nuxt > views > app.template.html, paste it as app.html to the root of your project, and edit it to add anything that you want to load to the project irrespective of the application state. Nuxt doc link
4. Understand the various Nuxt folders
layouts
Layouts are the high-level templates of your pages. You can use this to create unique user experiences, or optimize data fetching by layout. Read this Nuxt doc to understand how Nuxt views are structured.
plugins
The plugins folder allows you to load JS code into the application globally. You can use this to create anything from global axios error handlers to adding persistence to your vuex store to loading any libraries that you require across the application. Nuxt docs link.
middleware
The middleware folder is used to store code that runs before a page is loaded. Use it to add auth guards, redirects, etc. You can add middleware to nuxt.config.js, or to any layout or to any page. Nuxt doc link
store
The “store” folder requires an index.js file to be enabled. It allows you to use vuex stores across your application. You can create a separate js file for each store with each file containing its own mutations, getters, etc. Nuxt doc link
These are some of the most used folders. There are other folders which you can read about in the directory structure.
5. this.$nuxt.$emit is awesome
Sometimes you need to emit an event from (say) a layout or a plugin and listen to it on certain pages. Think of scroll handlers, websocket pings, or error handling from global plugins. The usual parent-child event passing paradigm doesn't apply here. In this case, you can use the event bus that Nuxt injects into Vue during initialization.
Pass events from anywhere to anywhere else using this.$nuxt.$emit('event', data) and listen to these like this.$nuxt.$on('event', this.doSomething)
So yeah, that's about it. I would love to read more tips in the comments from other Vue/Nuxt developers! Also feel free to correct me if I've made an error somewhere :)
Top comments (0)