Catch up Nuxt.js 2019.02

Slide 1

Slide 1 text

Catch up Nuxt.js 2019.02 2019.2.18 @andoshin11

Slide 2

Slide 2 text

Who am I? Shin Ando (a.k.a Andy) @andoshin11 - Frontend Developer / Architect - Vue.js Japan User Group - マイブーム: 朝ごはんめぐり Vue / Nuxt / React / Flutter / Go / Ruby etc... 2

Slide 3

Slide 3 text

3 ブログやってます

Slide 4

Slide 4 text

4 Nuxt community is red hot

Slide 5

Slide 5 text

5 Nuxt.js v2.4 Released

Slide 6

Slide 6 text

6 Nuxt.js v2.4 Released ● Smart prefetching ● HMR for Vuex store ● Better VS Code(Vetur) support ● Automatic available port detection ● Automatic modern build detection ● Plugins for each runtimes (all, client, server) ● Post CSS support ● Default TypeScript support (we’ll come back to this later!) ● And more ...

Slide 7

Slide 7 text

Slide 8

Slide 8 text

8 Dat all?

Slide 9

Slide 9 text

9 ● About 100 pull requests were closed since v2.4 release (Jan 28th) ● Release plan is updated!! ● Major release is planned for every 6 months ● Minor release is planned for every 4 weeks ● Wanna try out the latest features?

Slide 10

Slide 10 text

10 nuxt-edge is nightly built for ya!

Slide 11

Slide 11 text

Slide 12

Slide 12 text

12 Recently added features ※Not all of them will make it to the final release

Slide 13

Slide 13 text

Universal fetch by default ⊙ node-fetch and fetch polyfill are now built-in ⊙ Toggle with nuxt.config.js 13 pull: #5028

Slide 14

Slide 14 text

Top level async/await ⊙ Use Promise inside nuxt.config 14 pull: #4021

Slide 15

Slide 15 text

Top level async/await ⊙ Use Promise inside nuxt.config ⊙ More dynamic config generation 15 pull: #4021

Slide 16

Slide 16 text

.nuxtignore support ⊙ Ignore certain pages, layouts, middleware, store ⊙ Select targets with glob pattern 16 pull: #4647

Slide 17

Slide 17 text

Tons of tons of Unit tests!! ⊙ Better stability all around ⊙ Easier to just jump in and make a commitment! 17 pull: #4880 pull: #4857 pull: #4834

Slide 18

Slide 18 text

18 TypeScript support is getting stronger!

Slide 19

Slide 19 text

New face in the team! ⊙ @kevinmarrec has joined the core team ⊙ This dude is TypeScript guru 19

Slide 20

Slide 20 text

nuxt-ts distribution! ⊙ Auto generate tsconfig.json ⊙ Still experimental 20 distributions/nuxt-ts/bin

Slide 21

Slide 21 text

Officially supported! ⊙ Updated resolvers ⊙ TypeScript ⊙ TSX 21 packages/builder/src/builder.js

Slide 22

Slide 22 text

TypeScript for layouts 22 packages/builder/src/builder.js

Slide 23

Slide 23 text

TypeScript for routes 23 packages/builder/src/builder.js

Slide 24

Slide 24 text

Default Loader rules ⊙ Enhanced build.loaders options 24 packages/webpack/src/config/base.js

Slide 25

Slide 25 text

New options! ⊙ useForkTsChecker 25 packages/webpack/src/config/client.js

Slide 26

Slide 26 text

Official Type Definition ⊙ Context Type 26 packages/vue-app/types/index.d.ts

Slide 27

Slide 27 text

Official Type Definition ⊙ Context Type ⊙ Pages API Type 27 packages/vue-app/types/vue.d.ts

Slide 28

Slide 28 text

Enable Today! 28

Slide 29

Slide 29 text

29 A few more things...

Slide 30

Slide 30 text

WIP: More Type Definitions 30 Pull Request #4854

Slide 31

Slide 31 text

WIP: Better TSX ecosystem ⊙ Working with Vue core team ⊙ #9369 ⊙ #9379 31 Pull Request #4855

Slide 32

Slide 32 text

Enhanced possibility with Vue 2.6(?) ⊙ New rendering hooks on server side introduced ⊙ asyncData & fetch API will be available everywhere? 32