Versatile Vue.js Application

[atinux]

Nuxt.js goal is also to create rich vue.js applications easily.

Server side rendering can be hard to handle, so we will introduce a ssr: false option in nuxt.config.js.

The features will not change:

• Write vue files
• Automatic code splitting
• Powerful routing system with asynchronous data
• ES6/ES7 Transpilation
• Bundling and minifying JS & CSS
• Managing Head Elements
• Hot reloading in Development
• Static File Serving
• Pre-processor: SASS, LESS, Stylus, etc

With this option, we will set the mode to hash and introduce a nuxt export command to create a dist folder ready to be deployed on any CDN.

We might add a nuxtClientInit action in the store since the nuxtServerInit won't be called if ssr is disabled.

_{This feature request is available on Nuxt.js community (#c203)}

[ndarilek]

Please allow the router mode option to be overridden even if this configuration is used. I may configure my web server to send my app bundle on 404 such that client-side routes still work even without hashes, or configure a more traditional web app to route a portion of the URL space to my bundle. In those instances, I want the ability to use regular URLs without the hash.

Thanks.

[ausir0726]

We develop website use rest api about 4-5 years.
before use nuxt.js we use extjs and angular
build static front-end put on the cdn or static hosting
rest api server put on heroku.

we found nuxt.js , it looking amazing , and more fast develop for us
I really like this

but nuxt.js usually give us [[ ReferenceError: window is not defined ]] or documnet

we actual know we don't need ssr for project .
but we need to handle it for if ( process.BROWSER_BUILD )

so , if have an option ssr: false
for disable SSR will be perfect .

thanks.

[egoist]

@ausir0726 check out vbuild or vue build as well

[ausir0726]

@egoist I love nuxt.js more , and if I can handle SSR very well that can give us a basic perfect SEO for search engine and social media . :D

I can see the plugin can working with ssr:false , that's so great :D

[ausir0726]

@atinux nuxt.config.js now is not compiler with babel .
is possible let babel handle it ?
have some people use es7 in nuxt.config.js and got error . ( need node.js 7.6 )
and if user write generate.route use async/await like usually will get error .

ausir0726/nuxt-route-with-params#1

[pi0]

@ausir0726 As a work-around simply one can run nuxt with babel-node node_modules/nuxt/.bin/nuxt generate

But this makes Signification performance overhead specially for server applications

[ausir0726]

@pi0 yes ,
but I am talking about with a new guy touch nuxt.js
nuxt.js use ES6/ES7 Transpilation , but nuxt.config.js without ? that's wired 😸

[abelovic]

@egoist - Thanks for sharing. I tried it out vbuild - really nice!

@atinux - How far away is this from being implemented? From your road map it looks like it is only planned for 1.0 release?

[imndaiga]

Really looking forward to 1.0 release for the client bundle. I've been stumbling over painful hydration issues. Thumbs up on the great work so far!

[cain]

Looking forward to 1.0 release! When can we be expecting the release? :)

[atinux]

Actually, after a long talk with the team, SSR will be disable only for the whole application (to build SPA), this way we will be able to disable the server bundle directly and speed up the dev process :)

[sebastianmacias]

@atinux just to be sure. This won't impact 'nuxt generate', we would still be able to generate 100% static apps that can be deployed and served from a CDN using 'nuxt generate'

and

 generate: {
    routes: [
      '/my-route/my-action',
      '/my-route/another-action',
      '/projects/dashboad',
      ...
    ]

in nuxt.config.js

Am I correct?

[atinux]

@sebastianmacias nuxt generate will work like before.

In 1.0, a mode option will be introducted (default to universal), then, if you want to build a single page application, you will be able to set mode: 'spa' in your nuxt.config.js to generate a client-side only web app :)

[sebastianmacias]

Excellent, thanks for the clarification

[rAugustos]

Hi @atinux .

I'm happy to see the nuxt team working hard to improve nuxt.

For example:
File : nuxt.config.js

• Set mode: 'spa'

File: store/example.js

export const state = () => {
  return {
    token : localstorage.getItem('token')
  }
}

Localstorage will ve avaible in store? or this example will result:
ReferenceError: localstorage is not defined

Currently (before this feature ), is possible localstorage be used in store if a set ssr:false or using other configuration ?

Thanks in advanced.

[atinux]

Hi @rAugustos

Indeed, you won't have to check if you're on server-side or client-side, since with the mode: 'spa', it will be run only on client-side, but you need to be aware that server-side rendering will be disabled.

Right now, to have full SSR feature, you should not use localStorage but a session stored on the server instead.

[hymair]

Is there an ETA for 1.0?

[rAugustos]

Hi @atinux

In the branch Dev you added the issue 'Add spa Example' using mode: 'sap' Woo!

@pi0 , improve spa errors nice!

Thanks in advance, I'm following every commit.

[atinux]

You can start playing with spa mode with rc5, see https://github.com/nuxt/nuxt.js/releases/tag/v1.0.0-rc5

And spa example

[TheDeveloperTom]

@atinux solved this problem this way - https://github.com/egoist/vue-no-ssr

[atinux]

I see, this is pretty smart actually.

BTW, <no-ssr> has been implemented and will be in the next release, see https://github.com/nuxt/nuxt.js/tree/dev/examples/no-ssr

[atinux]

@TheDeveloperTom Actually, I forgot about this feature: #1468 (comment)

So you can create a serverMiddleware which check req.headers to know if the User Agent is a mobile and then set res.spa = true :)

[TheDeveloperTom]

@atinux is this approach preferred? I mean, is using 'spa' property more preferred, or gives more opportunities? Thank in advance

[pi0]

@TheDeveloperTom While programmatic enable/disable of SSR per route is available, I would suggest currently using spa mode only and Having two separate nuxt projects for it. This helps more bundle optimization.

[simplesmiler]

Are there still plans to add nuxtClientInit?

A use case is waiting for the user auth session to settle (waiting for ajax request to return) before proceeding with rendering.

[atinux]

@simplesmiler Actually you can perform nuxtClientInit yourself with a plugin:

nuxt.config.js:

module.exports = {
  plugins: [{ src: '~/plugins/nuxt-client-init.js', ssr: false }]
}

plugins/nuxt-client-init.js

export default async (ctx) => {
  await ctx.store.dispatch('nuxtClientInit', ctx)
}

[simplesmiler]

@atinux I've been doing this currently with middleware, but I guess plugin is the better way, yes.

[uptownhr]

@atinux although possible to do yourself, I think a decision for consistency should be made. To either

1. have nuxtClientInit available as a part of nuxt
2. remove nuxstServerInit and user's can implement like nuxtClientInit
3. Join both into nuxtInit and have users use the isBrowser/isServer flags. For nuxtInit, we can probably detach from the store since ctx is going to be availalbe anyways.

[dotnetCarpenter]

Would it be possible to do on a component level? I got some client-side only components and it would be far easier if I could just set a property and not think about if lifecycle hooks are run server-side. Plus it opens up for using a lot more components from the vue ecosystem.

[atinux]

@dotnetCarpenter you can use the <no-ssr> component, it's exactly the same as https://github.com/egoist/vue-no-ssr and it's already included in every Nuxt.js projects :)

[dotnetCarpenter]

To everyone who want to use <no-ssr>, this.refs doesn't contain your ref="" on mounted. You have to wrap your logic in this.$nextTick(() => { ... })

[TheDeveloperTom]

@dotnetCarpenter thanks man.

[ansarizafar]

We can avoid <no-ssr> with Domino https://github.com/fgnass/domino

[weotch]

FYI, I made a little Nuxt module based on @atinux 's suggestion: https://github.com/BKWLD/nuxt-spa-store-init

[billjwolff]

I ran into the same problem using SSR. It works fine under yarn dev but after yarn generate and FTP of the /dist to the site the appendChild error happens. I changed the v-if to v-show (was on a template, v-show does not support templates) and things are working better.

[y2x33]

@atinux thanks for the solution!
Also I add process.static to avoid that nuxtClientInit and nuxtServerInit are both called in ssr mode.

export default async (ctx) => {
  if (process.static) {
      await ctx.store.dispatch("nuxtClientInit", ctx);
  }
}

[mgiraldo]

To everyone who want to use <no-ssr>, this.refs doesn't contain your ref="" on mounted. You have to wrap your logic in this.$nextTick(() => { ... })

hey @dotnetCarpenter i'm using nuxt-leaflet and have this in my app (loads a map centered somewhere in germany):

<template>
  <no-ssr>
    <l-map ref="myMap"></l-map>
  </no-ssr>
</template>

<script>
export default {
  async mounted() {
    await this.$nextTick(() => {
      let map = this.$refs.myMap.mapObject
      map.setView(L.latLng(50.5, 10.5), 11)
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(
        map
      )
    })
  }
}
</script>

it only works on client-side. when i do a full page refresh i get _this.$refs.myMap is undefined. i believe using mounted and wrapping in $nextTick should take care of this. what might i be missing? there's this hacky solution in the nuxt-leaflet repo but it seems like $nextTick should be the way:

const checkMapObject = setInterval(() => {
  if (this.$refs.map) {
    this.map = this.$refs.map.mapObject
    clearInterval(checkMapObject)
  }
}, 100)

[Pacheco95]

@simplesmiler Actually you can perform nuxtClientInit yourself with a plugin:

nuxt.config.js:

module.exports = {
  plugins: [{ src: '~/plugins/nuxt-client-init.js', ssr: false }]
}

plugins/nuxt-client-init.js

export default async (ctx) => {
  await ctx.store.dispatch('nuxtClientInit', ctx)
}

@atinux I tried to fetch some data with a plugin, but axios is not sending credentials even with explicit { withCredentials: true, }
I have another plugin that injects axios into an api factory and I'm using this factory to fetch the data mentioned before. Take a look:

// plugins/repository.ts

import { Plugin } from '@nuxt/types'

import { api } from '@/api/repository'


const evaApiPlugin: Plugin = (context, inject) => {
  inject('evaApi', api(context.$axios))
}

export default evaApiPlugin

// api.ts

export default ($axios: NuxtAxiosInstance) => ({
  fetchAllCategories() {
    return $axios.$get<CategoryGetAllResponse[]>('/category')
  },
})

// plugins/nuxt-client-init.ts
import { Plugin } from '@nuxt/types'

const clientInit: Plugin = async (context) => {
  try {
    const response = await context.$evaApi.categories.fetchCategories()
    console.log('categories', response)
  } catch (e) {
    console.error(e)
  }
}

export default clientInit

// nuxt.config.ts
{
  plugins: [
    '@/plugins/antd-ui',
    '@/plugins/repository',
    '@/plugins/filters',
    '@/plugins/currency-input',
    '@/plugins/nuxt-client-init',
  ],
}

Calling api functions inside my components and store works fine but inside plugins dont. All requests with my injected api from plugins is throwing 401 (Unauthorized). Do you know how to solve this issue?

[leotuna]

@Pacheco95, were you able to solve this? Axios requests not sending token.