feat(vue-app): support configurable features

[pimlie]

This PR is only a draft because we didn't discuss this yet before. Feature-wise I think its complete, maybe just need to add some tests.

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

The Nuxt Vue-app has quite a bit of features which until this PR were always included, whether you used them or not. This PR defines a list of features which are used to either include or omit the corresponding code in the Vue-app templates. This makes it possible for a user to further optimize their bundle sizes.

Here is the list of features which are toggleable:

  features: {
    router: true, // not implemented
    store: true,
    layouts: true,
    meta: true,
    middleware: true,
    transitions: true,
    deprecations: true,
    validate: true,
    asyncData: true,
    fetch: true,
    clientOnline: true,
    clientPrefetch: true,
    clientUseUrl: false, // this is a bit of an odd one, but using URL should eg be ok for modern mode already
    componentAliases: true,
    componentClientOnly: true
  }

I've included a copy of the hello world example app with all (supported) features disabled.

App bundle size of Hello world app

App bundle size of Minimal-features Hello world app:

This PR was also partially given in by the benchmark discussions on discord. You could argue that disabling all these settings is not very usefull and I will probably agree with that. But giving users the possiblity to further optimize their bundle sizes is a nice feature I think and worth the extra work with regards to maintaining the vue-app templates.

Disabling features is considered highly experimental and for advanced users only.

Note: The above bundle size of the Hello world app has already improved slightly compared to the current dev branch. This is mainly due to some optimisations in ./utils.js. Eg urlJoin is/was always included in the app bundle but thats only used in server.js

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly. (PR: #)
• I have added tests to cover my changes (if not applicable, please state why)
• All new and existing tests are passing.

[manniL]

Amazing idea 👍

[pimlie]

Added the suggestions and implemented store/layout features. Also had some wrong/old features in the nuxt.config of the minimal example, so size is even smaller now (image of app bundle size is updated).

[pi0]

Really nice enhancement. I wish we could also support disabling router. But seems not an easy task for initial PR.

[codecov-io]

Codecov Report

Merging #6287 into dev will increase coverage by 0.02%.
The diff coverage is 97.29%.

@@            Coverage Diff             @@
##              dev    #6287      +/-   ##
==========================================
+ Coverage   95.71%   95.74%   +0.02%     
==========================================
  Files          79       79              
  Lines        2663     2678      +15     
  Branches      682      691       +9     
==========================================
+ Hits         2549     2564      +15     
  Misses         98       98              
  Partials       16       16

Flag	Coverage Δ
#e2e	100% <ø> (ø)	⬆️
#fixtures	50.82% <32.43%> (+0.12%)	⬆️
#unit	92.38% <94.59%> (ø)	⬆️

Impacted Files	Coverage Δ
packages/builder/src/context/template.js	100% <ø> (ø)	⬆️
packages/vue-app/src/index.js	0% <ø> (ø)	⬆️
packages/config/src/config/_app.js	100% <ø> (ø)	⬆️
packages/builder/src/builder.js	99.64% <100%> (+0.01%)	⬆️
packages/vue-renderer/src/renderers/spa.js	87.87% <100%> (+0.18%)	⬆️
packages/vue-renderer/src/renderers/ssr.js	94.02% <92.85%> (+0.37%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c010add...f1bfdf9. Read the comment docs.

[pimlie]

I looked into making the router configurable as well but almost every function in client.js makes use of from / to params and it seems just to much integrated into all the logic. Dont think it will be an easy task to support disabling the router in the current code. A complete rewrite of client.js with optional router disabling in mind will probably be faster.

[atinux]

Great work @pimlie, I had this in mind for Nuxt 3.

Ideally, the features enable themselves when used (when detecting the directory associated or defined in the config). Also, I am afraid that some module may not work if the user disable some features 🤔

[pimlie]

Ideally, the features enable themselves when used (when detecting the directory associated or defined in the config).

Well, yes/no. I can imagine there are also times you just want to disable a feature regardless whether you have certain files in your project. Eg with the current store implementation I did you can have a store module in your project, but if you toggle the feature to false it will still be disabled.

Also, I am afraid that some module may not work if the user disable some features 🤔

True, for the moment thats really up to the user to think about. Thats why I mentioned experimental and for advanced users only.

I dont think we should launch this pr as a great new feature anyway, not as long as we cant provide a router feature. So I would propose to do a silent launch, learn from it and then improve by maybe taking the approach you had in mind for v3

[manniL]

Well, yes/no. I can imagine there are also times you just want to disable a feature regardless whether you have certain files in your project. Eg with the current store implementation I did you can have a store module in your project, but if you toggle the feature to false it will still be disabled.

Definitely, the user prefence should take precedence! But disabling/enabling features if certain conditions are present and the user didn't set the config otherwise would be nice.

[pi0]

what do you think about flattened options like compoentAliases? This way we don't need to always worry about falsy value in the path (Like components: false)

[pi0]

A REALLY REALLY nice improvement to support minimal builds for nuxt. Can't wait to also have router disabling support. With nuxt 3 we can have nuxt to be used like:

• Create app.vue
• npx nuxt dev
• TADA! A fully minimal/universal/efficient vue app is ready!

I think we should be better to merge this ASAP to avoid merge conflicts.

[pimlie]

@clarkdo Thanks, could you please verify if I implemented it correctly?

And I would appreciate your/anyone's help with resolving the error with unicode-base, dont really understand why that now gives an error? The file exists on the fs and is listed in the manifest, does one of you maybe have any idea why jsdom cant find it? Only change for that test is that I added modern: 'server' in nuxt.config.

--edit--
It seems that in none of the modern test renderAndGetWindow is used, guess thats on purpose? I could use rp as well but that doesnt encode the unicode char automatically

[clarkdo]

@pimlie Looks perfect, you can double verify it by having a look at analyze report.