DEV Community

Nuxt.js v2.4.0 is out! TypeScript, Smart prefetching and more...

Sébastien Chopin on January 28, 2019

You can see this release note on GitHub as well: https://github.com/nuxt/nuxt.js/releases/tag/v2.4.0 Important news 👀 New co...
Collapse
 
dotnetcarpenter profile image
Jon Ege Ronnenberg

Great news!

Auto-detection of modern bundles

But I'm scratching my head about "modern bundles". Is is modern nodejs or modern browsers? And how does nuxt detect that, is it by using browserslist?

Collapse
 
atinux profile image
Sébastien Chopin

The modern bundles is for "modern" browsers (or called evergreen). This mode removes the polyfills for older browser to make it smaller (around ~30%).

Nuxt detects that by using our own list: github.com/rlindskog/nuxt.js/blob/...

You can learn more about it in this PR: github.com/nuxt/nuxt.js/pull/4419

Collapse
 
dotnetcarpenter profile image
Jon Ege Ronnenberg

So this is only for nuxt users who doesn't use babel-preset-env to transpile JavaScript.

Since babel-preset-env depends on browserslist and browserslist depends on caniuse-lite, which is the "fat" dependency you removed from nuxt.

Does the removal matter at all since this is unused data on the server-side, which should not even be installed when using npm install --production?

On the client-side the build should have the same size if I write the same evergreen browsers in my package.json, .babelrc or .browserslistrc.

I still can not tell from github.com/nuxt/nuxt.js/pull/4419/... , if the new list overwrite my browserslist query or detect if my query fits with modern browsers.
Sorry, if this obvious.

Thread Thread
 
atinux profile image
Sébastien Chopin

Actually if you use babel-preset-env to target specific browser right from Babel, you won't need to use the modern mode.

This modern mode is to both support old browser by giving them a bundle with polyfill while giving the smaller bundle when a modern browser hits the Nuxt server :)

You can learn more about it here anyway: nuxtjs.org/api/configuration-modern

Collapse
 
renestalder profile image
René Stalder

I start to get confused about TypeScript support and how it should be used.

The very standard way of using TypeScript with Vue.js is by using Vue.extend, which allows you to use TypeScript without adding third-party libraries. That's the way I prefer for my team, as you can immediately apply everything from the JavaScript Vue.js documentation without the need to lookup how to solve it with decorators.
vuejs.org/v2/guide/typescript.html...

Then there is an example TypeScript template in the nuxt-community group on Github. It uses nuxt-property-decorator to use Vue and Nuxt with class style Vue.
github.com/nuxt-community/typescri...

Now, the example in your post is pointing to code using class style Vue with Nuxt and vue-property-decorator.
github.com/nuxt/nuxt.js/tree/dev/e...

Is there any good, up-to-date post about which is the recommended official way and why? Especially regarding the upcoming Vue.js 3.0, function style seems to be the most sustainable method in my understanding, as it will be transformed to classes on compile time. Also it gets PropType helper in Vue.js 2.6.

I expect more breaking changes with the usage of the third-party decorator libraries.

Collapse
 
kevinmarrec profile image
Kevin Marrec • Edited

Hey, sorry if the lack of documentation can bring confusion around Nuxt TypeScript Support. But it will be updated really soon, along TypeScript definitions for the configuration file.

About how it should be used : Nuxt TS support not only provides support around Vue SFC. It also provides .ts & .tsx support for Nuxt pages/layouts/components, nuxt.config.ts support but overall it provides TS runtime support, which means you can use TypeScript for modules/serverMiddleware as well, or may I say, everywhere in your Nuxt project.

The Nuxt typescript minimal example is using Class decorators through vue-property-decorator cause IMO decorators showcases better the TypeSript's power by using classes.

You're free to use either Vue.extend or vue-property-decorator with TypeScript classes. We don't ship vue-property-decorator in Nuxt, it's an external dependency you can chose to either use or not.

FYI, you can find the different behaviors of using TypeScript around Nuxt in our own test fixtures : github.com/nuxt/nuxt.js/tree/dev/t...

Then, about vue-property-decorator VS nuxt-property-decorator, there will be a section in documentation but here is my thoughts about it :

nuxt-property-decorator registers hooks which make you able to use Nuxt (asyncData for example) things directly in the class, but doesn't provide either autompletion or typechecking right here. Further more, it's also easier to not having to maintain a library on top of the other one :).

Finally, when Vue.js 3.0 will land, not only TypeScript support will/can be impacted around Nuxt, that's why we'll be surely releasing a major version of Nuxt when migrating to Vue.js 3.

Collapse
 
vicoerv profile image
Vico

i have ongoing project that use Nuxt.js, but i have problem on deployment. Because in 1 vps i have multiple project, and i must run nuxt program one by one, and each port i must register into apache2 for reverse proxy, do you have alternative to this problem?

Collapse
 
sergdeadelantado profile image
Serg de Adelantado • Edited

I suggest you to use Nginx as reverse proxy and add some util for config automation to your CI pipeline. For example, there are nginx-config-builder and nginx-conf, both allows to create and edit nginx configs. Unfortunetly, I didn't found an alternative for Apache, however since Apache uses xml-powered configs, it should be easy to write your own. You also may use Docker to simplify a deployment process for your projects.

Collapse
 
vicoerv profile image
Vico • Edited

thank you for your help, I will check it out

Collapse
 
vicoerv profile image
Vico

help

Collapse
 
sudhir600 profile image
SUDHIR K GUPTA

Hi Guys, in nuxt, is there a way to add css and javascript sequencely.
such as . i have to add (all in head)
1.css [then]
2.js [then]
3.css
but in in nuxt there is separate key [link] and [script] under head to add files.
let's assume 1st i am adding css file and then below js file adding body:true
head: {
link:[{'1.css'}, {'3.css'}]
script:[{'2.js', body:true}]
}

this code resolve head as (1,3,2) which is failed..
any idea, how to sequence it?

Collapse
 
paul_melero profile image
Paul Melero

So many great features! Congratulations!! Can't wait to try them 😍😊

Collapse
 
gugadev profile image
gugadev

Great work! You really improve Developer Experience with those amazing commits. I'm an Angular & React dev learning Vue and I really like it. Thanks for made the Vue ecosystem better.

Collapse
 
skyrpex profile image
Cristian Pallarés

Looks amazing, guys! Specially the typescript support, which is the future on JS IMO!

Collapse
 
gijovarghese profile image
Gijo Varghese

I've left VueJS and Nuxt.js (switched to React). Anyway nice work, cool features 👍

Collapse
 
joelvarty profile image
Joel Varty

Been using Nuxt for just a couple days now, but really impressed!