Sitemap
We’ve moved to freeCodeCamp.org/news

We’ve moved to https://freecodecamp.org/news and publish tons of tutorials each week. See you there.

Follow publication

Universal application code structure in Nuxt.js

8 min readSep 15, 2018

--

Vuex Store (/store)

const createStore = () => {
return new Vuex.Store({
...
})
}

Route Middleware (/middleware)

// nuxt.config.js export default {
router: {
middleware: 'authenticated'
},
}
// layouts/default.vueexport default {
middleware: 'authenticated-basic-plan-user'
}
// pages/index.vueexport default { 
middleware: 'subscribed'
}

Vue Components

1. Page components 👑 (/pages)

// pages/index.vue export default {  validate() { 
// validates dynamic URL parameters
// verifies the availability of the data
},

asyncData() {
// sets component data
},
fetch() {
// doesn't set component data, but
// fetches further contextual data
}
}

2. Layout components (/layouts)

<template>
<div>
<nuxt/>
</div>
</template>

3. Vue.js components (/components)

Assets

Webpacked assets (/assets)

Static assets (/static)

Modules, serverMiddleware and plugins

Modules (/modules)

serverMiddleware (i.e. /api)

Plugins (/plugins)

High-level overview of modules, serverMiddleware and plugins

Package, bundle and deliver

Nuxt packages your code — Webpack bundles and delivers your code

Conclusion

Diagrams links with high-res versions of the diagrams used above

https://www.pariksha.io/

Are you Nuxt yet?

--

--

We’ve moved to freeCodeCamp.org/news
We’ve moved to freeCodeCamp.org/news

Responses (6)