Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker
VueDay Italy - 12.04.19
Alexander Lichter
Nuxt.js Core Team
@TheAlexLichter
from 🇩🇪
and about you!
Disclaimer: no physical batteries included
Disclaimer: no floppy disk included
Who likes to write router.js files?
Do we actually need a router.js file? 🤔
my-page.com/about
my-page.com/
🎉 File based routing
Another lengthy thing.
Initializing our Vuex store!
import user from '....'
import cart from '....'
import favorites from '....'
import Vuex from 'vuex'
const createStore = () => {
return new Vuex.Store({
namespaced: true,
state: () => ({
query: ''
}),
mutations: {
updateQuery(state, query) {
state.query = query;
}
},
modules: {
user,
cart,
favorites,
},
actions: {
async newSearch({dispatch, commit}, data) {
//...
},
async populateQuery({dispatch, commit}, query) {
//...
},
async doThings({dispatch, commit}) {
//...
}
},
getters: {
getQuery: state => state.query,
getLoading: state => state.isLoading
},
})
};
Same as with the router, we can use the power of the file system here!
🎉 One module per file!
export const state = () => ({/**/})
export const mutations = {/**/}
export const actions = {/**/}
export const getters = {/**/}
But wait... what was that folder?
Fine-grained control and splitting possible
export default {
setName(state, name){
state.name = name
},
// more mutations here!
}
Disclaimer: no rocket included
Disclaimer: no joker or jester but jest included
Let's do a quick time travel!
Backend
1. Request
4. HTML
DB
2. Query
3. Results
But: "Click and wait" for every page
CDN
1. Request
2. Return Javascript
3. Parsing
API
4. Request
5. Response
Node.js
Server
1. Request
4. HTML + JS
API
2. Request
3. JSON
5. Hydration after JS Download
optional
5. Request
6. JSON
Disclaimer: Solving a 1k puzzle is harder than using Nuxt
Also, sadly, no jigsaw included
Disclaimer: a lot of friendliness and joy included
https://discord.nuxtjs.org
To get going really fast, you can use the Nuxt CodeSandbox template at https://template.nuxtjs.org/
Locally, you can use
yarn create nuxt-app PROJECTNAME
# or
npm create-nuxt-app PROJECTNAME
🤔
https://joind.in/event/vueday-2019/nuxtjs---why-how-oh-yeah
By Alexander Lichter
Web Engineering Consultant • Founder • Nuxt team • Speaker