Use vie-meta and webpack 26

examples/head-elements/components/twitter-head.vue

@@ -0,0 +1,16 @@
+<template>
+  <span v-if="false"></span>
+</template>
+
+<script>
+export default {
+  head: {
+    meta: [
+      { name: 'lol', content: 'hello' }
+    ]
+  }
+}
+</script>
+
+<style lang="css">
+</style>

examples/head-elements/nuxt.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  head: {
+    titleTemplate: '%s - Nuxt.js',
+    meta: [
+      { charset: 'utf-8' },
+      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+      { hid: 'description', name: 'description', content: 'Meta description' }
+    ]
+  }
+}

examples/head-elements/pages/about.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="container">
+    <h1>About page</h1>
+    <router-link to="/">Go to /</router-link>
+    <twitter-head></twitter-head>
+  </div>
+</template>
+
+<script>
+import TwitterHead from '../components/twitter-head.vue'
+
+export default {
+  head: {
+    title: 'About 2',
+    meta: [
+      { hid: 'description', name: 'description', content: 'About page description' }
+    ]
+  },
+  components: {
+    TwitterHead
+  }
+}
+</script>
+
+<style>
+.container {
+  text-align: center;
+  margin-top: 150px;
+  font-size: 20px;
+}
+</style>

examples/head-elements/pages/index.vue

@@ -1,20 +1,25 @@
 <template>
-  <nuxt-head>
-    <title>I am the title of the page</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-  </nuxt-head>
-
-  <h1>This page has a title 🤔</h1>
+  <div class="container">
+    <h1>Home page 🚀</h1>
+    <router-link to="/about">Go to /about</router-link>
+  </div>
 </template>
 
 <script>
 export default {
-  metaInfo: {
-    title: 'This page has a title 🤔',
+  head: {
+    title: 'Home page 🚀',
     meta: [
-      { charset: 'utf-8' },
-      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
+      { hid: 'description', name: 'description', content: 'Home page description' }
     ]
   }
 }
 </script>
+
+<style>
+.container {
+  text-align: center;
+  margin-top: 150px;
+  font-size: 20px;
+}
+</style>

examples/hello-world/pages/about.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <img src="../static/nuxt-square.png" />
+    <img src="~static/nuxt-square.png" />
     <h2>Thank you for testing nuxt.js</h2>
     <p><router-link to="/">Back home</router-link></p>
   </div>

lib/app/App.vue

@@ -38,7 +38,8 @@ export default {
   },
   components: {
     NuxtError<%= (loading ? ',\n\t\tNuxtLoading' : '') %>
-  }
+  },
+  head: <%= JSON.stringify(head) %>
 }
 </script>
 

lib/app/index.js

@@ -3,9 +3,17 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue'
+import Meta from 'vue-meta/lib/vue-meta.js' // require the ES2015 lib
 import router from './router'
 <% if (store && storePath) { %>import store from '<%= storePath %>'<% } %>
 
+Vue.use(Meta, {
+  keyName: 'head', // the component option name that vue-meta looks for meta info on.
+  attribute: 'n-head', // the attribute name vue-meta adds to the tags it observes
+  ssrAttribute: 'n-head-ssr', // the attribute name that lets vue-meta know that meta info has already been server-rendered
+  tagIDKeyName: 'hid' // the property name that vue-meta uses to determine whether to overwrite or append a tag
+})
+
 <% plugins.forEach(function (pluginPath) { %>
 require('<%= pluginPath %>')
 <% }) %>

lib/app/router.js

@@ -2,10 +2,8 @@
 
 import Vue from 'vue'
 import Router from 'vue-router'
-import Meta from 'vue-meta'
 
 Vue.use(Router)
-Vue.use(Meta)
 
 <% router.routes.forEach(function (route) { %>
 const <%= route._name %> = process.BROWSER ? () => System.import('<%= route._component %>') : require('<%= route._component %>')

lib/build/index.js

@@ -29,7 +29,7 @@ const defaults = {
 const defaultsLoaders = [
   {
     test: /\.(png|jpg|gif|svg)$/,
-    loader: 'url',
+    loader: 'url-loader',
     query: {
       limit: 1000, // 1KO
       name: 'img/[name].[ext]?[hash]'
@@ -37,7 +37,7 @@ const defaultsLoaders = [
   },
   {
     test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-    loader: 'url',
+    loader: 'url-loader',
     query: {
       limit: 1000, // 1 KO
       name: 'fonts/[name].[hash:7].[ext]'
@@ -155,6 +155,7 @@ function * generateRoutesAndFiles () {
       linkActiveClass: this.options.router.linkActiveClass,
       routes: this.routes
     },
+    head: this.options.head,
     store: this.options.store,
     css: this.options.css,
     plugins: this.options.plugins.map((p) => r(this.dir, p)),

lib/build/webpack/base.config.js

@@ -23,6 +23,9 @@ module.exports = function () {
       publicPath: urlJoin(this.options.router.base, '/_nuxt/')
     },
     resolve: {
+      alias: {
+        'static': join(this.dir, 'static')
+      },
       modules: [
         nodeModulesDir,
         join(this.dir, 'node_modules')
@@ -38,12 +41,12 @@ module.exports = function () {
       rules: [
         {
           test: /\.vue$/,
-          loader: 'vue',
+          loader: 'vue-loader',
           options: vueLoaderConfig.call(this)
         },
         {
           test: /\.js$/,
-          loader: 'babel',
+          loader: 'babel-loader',
           exclude: /node_modules/,
           options: {
             presets: ['es2015', 'stage-2']

lib/nuxt.js

@@ -24,6 +24,7 @@ class Nuxt {
       _build: true,
       // general options
       dev: true,
+      head: {},
       plugins: [],
       css: [],
       store: false,

lib/views/app.html

@@ -1,17 +1,18 @@
 <% const {
-  title,
-  htmlAttrs,
-  bodyAttrs,
-  meta
-} = context.meta.inject()
-%><!DOCTYPE html data-vue-meta-server-rendered>
-<html>
+  title, htmlAttrs, bodyAttrs, link, style, script, noscript, meta
+} = context.meta.inject() %><!DOCTYPE html>
+<html n-head-ssr ${htmlAttrs.text()}>
   <head>
-    ${title.toString()}
+    ${meta.text()}
+    ${title.text()}
+    ${link.text()}
+    ${style.text()}
+    ${script.text()}
+    ${noscript.text()}
     <base href="<%= baseUrl %>">
     <% if (!dev) { %><link rel="stylesheet" href="<%= files.css %>"><% } %>
   </head>
-  <body>
+  <body ${bodyAttrs.text()}>
     <%= APP %>
     <script type="text/javascript" defer>window.__NUXT__=<%= serialize(context.nuxt) %></script>
     <script src="<%= files.vendor %>" defer></script>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "A minimalistic framework for server-rendered Vue.js applications (inspired by Next.js)",
   "main": "index.js",
   "license": "MIT",
@@ -43,11 +43,11 @@
     "url-loader": "^0.5.7",
     "vue": "^2.0.5",
     "vue-loader": "^9.8.0",
-    "vue-meta": "^0.0.0",
+    "vue-meta": "^0.4.1",
     "vue-router": "^2.0.1",
     "vue-server-renderer": "^2.0.5",
     "vuex": "^2.0.0",
-    "webpack": "2.1.0-beta.25",
+    "webpack": "2.1.0-beta.26",
     "webpack-dev-middleware": "^1.8.4",
     "webpack-hot-middleware": "^2.13.1"
   },
@@ -57,7 +57,7 @@
     "eslint": "^3.8.1",
     "eslint-config-standard": "^6.2.1",
     "eslint-plugin-html": "^1.5.5",
-    "eslint-plugin-promise": "^3.3.0",
+    "eslint-plugin-promise": "^3.3.2",
     "eslint-plugin-standard": "^2.0.1",
     "nodemon": "^1.11.0"
   }