CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
Run
Run

Reputation: 57176

Nuxt/ Vue - the html and js files it generates

I just started using Nuxt for server side rendering. It seems like a great framework. But I don't like about it is it generates lots of ugly html markups, js links, and the css is basically being dumped into the html directly. Also, you see lots of data-s. It seems that you have no control of them at all (that worries me!). For example:

<!DOCTYPE html>
<html data-n-head-ssr data-n-head="">
  <head>
    <meta data-n-head="true" charset="utf-8"/><meta data-n-head="true" name="viewport" content="width=device-width, initial-scale=1"/><meta data-n-head="true" data-hid="description" name="description" content="Nuxt.js project"/><title data-n-head="true">Users</title><link data-n-head="true" rel="icon" type="image/x-icon" href="/favicon.ico"/><link rel="preload" href="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" as="script"><link rel="preload" href="/_nuxt/common.992cf40ea79f7d7937d8.js" as="script"><link rel="preload" href="/_nuxt/app.2d1407798eb328e5c249.js" as="script"><link rel="preload" href="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" as="script"><link rel="preload" href="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" as="script"><link rel="prefetch" href="/_nuxt/pages/index.3c2e71cd997494896cb8.js"><link rel="prefetch" href="/_nuxt/pages/users-name.353da70d66b2cb18c1c9.js"><link rel="prefetch" href="/_nuxt/pages/about.7e9c73cd5e6253d976d6.js"><link rel="prefetch" href="/_nuxt/layouts/dark.9d852c7e76764cd94b7c.js"><link rel="prefetch" href="/_nuxt/pages/tasks.67c8259c9b53f68ea9a3.js"><style data-vue-ssr-id="5e853cdc:0">body,html{background-color:#fff;color:#000;letter-spacing:.5px;font-family:Source Sans Pro,Arial,sans-serif;height:100vh;margin:0}footer{padding:20px;text-align:center;border-top:1px solid #ddd}a,a:focus,a:hover,a:visited{color:#000}.logo{width:100%;height:auto;max-width:400px;max-height:289px}.layout-enter-active,.layout-leave-to{-webkit-transition:opacity .5s;transition:opacity .5s}.layout-enter,.layout-leave-to{opacity:0}</style><style data-vue-ssr-id="c6f373dc:0">.progress[data-v-5b643829]{position:fixed;top:0;left:0;right:0;height:2px;width:0;-webkit-transition:width .2s,opacity .4s;transition:width .2s,opacity .4s;opacity:1;background-color:#efc14e;z-index:999999}</style><style data-vue-ssr-id="59c3f703:0">.title[data-v-2941d5fc]{margin:30px 0}.users[data-v-2941d5fc]{list-style:none;margin:0;padding:0}.user[data-v-2941d5fc]{margin:10px 0}</style>
  </head>
  <body data-n-head="">
    <div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc><img src="/_nuxt/img/logo.a04e995.png" alt="Nuxt.js Logo" class="logo" data-v-2941d5fc><h1 class="title" data-v-2941d5fc>
    USERS
  </h1><ul class="users" data-v-2941d5fc><li class="user" data-v-2941d5fc><a href="/users/jona" data-v-2941d5fc>
        jona
      </a></li><li class="user" data-v-2941d5fc><a href="/users/jon" data-v-2941d5fc>
        jon
      </a></li><li class="user" data-v-2941d5fc><a href="/users/jonas" data-v-2941d5fc>
        jonas
      </a></li></ul></section></div><script type="text/javascript">window.__NUXT__={"layout":"default","data":[{"users":[{"_id":"59a53db03a35535198135b15","id":null,"name":"jona"},{"_id":"59a53ded3a35535198135b17","id":null,"name":"jon"},{"_id":"59a574afd5bc922f3dbf8b68","id":null,"name":"jonas"}]}],"error":null,"serverRendered":true};</script><script src="/_nuxt/manifest.1dd9a3883f67d40b9aa7.js" defer></script><script src="/_nuxt/layouts/default.1360f17fdf8a6083917d.js" defer></script><script src="/_nuxt/pages/users.a5ea843f780a24b7dfd7.js" defer></script><script src="/_nuxt/common.992cf40ea79f7d7937d8.js" defer></script><script src="/_nuxt/app.2d1407798eb328e5c249.js" defer></script>
  </body>
</html>

This is plain ugly to me:

<div id="__nuxt" data-server-rendered="true"><div class="progress" style="width:0%;height:2px;background-color:black;opacity:0;" data-v-5b643829></div><section class="container" data-v-2941d5fc>

Why do I need id="__nuxt" for?

How can I build all the js files into one file - not sure if this is possible?

How can I not to embed the entire css into the html?

How is this going to effect SEO?

Upvotes: 1

Views: 4844

Answers (1)

Mesut
Mesut

Reputation: 242

data-v-* attributes?

They come from the vue CSS loader if you use scoped css.

Why do I need id="__nuxt" for?

Because it mounts Vue app to DOM element which is <div id="__nuxt"></div>

How can I build all the js files into one file - not sure if this is possible?

Why would you do that? Nuxt tries to help you avoid performance issues. That's why it seperates.

How can I not to embed the entire css into the html?

You can extract css check out the docs here but again it will extract what's common not all css.

How is this going to effect SEO?

It won't.

--

You can try to extend webpack config for your needs(bundling js, extracting css etc.). Check out the docs.

Edit: Also you can check other popular frameworks like Next or Gatsby. All of them trying to follow best practices. Server side rendered output is not meant to be pretty infact it's uglified(minified) on purpose.

Upvotes: 5

Related Questions