Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Versatile Vue.js Application #240

Closed
Atinux opened this issue Feb 11, 2017 · 39 comments

Comments

@Atinux
Copy link
Member

commented Feb 11, 2017

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)

@Atinux Atinux added this to the 1.0 milestone Feb 11, 2017

@Atinux Atinux added this to 0.9.11 in Roadmap 1.0 Feb 11, 2017

@Atinux Atinux moved this from 0.12.0 to 1.0 in Roadmap 1.0 Feb 28, 2017

@ndarilek

This comment has been minimized.

Copy link

commented Mar 7, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Mar 15, 2017

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

This comment has been minimized.

Copy link
Contributor

commented Mar 21, 2017

@ausir0726 check out vbuild or vue build as well

@ausir0726

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2017

@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

This comment has been minimized.

Copy link
Member

commented Mar 29, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Mar 29, 2017

@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

This comment has been minimized.

Copy link

commented Mar 30, 2017

@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?

@wndaiga

This comment has been minimized.

Copy link

commented Mar 30, 2017

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

This comment has been minimized.

Copy link

commented Jul 17, 2017

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

@Atinux

This comment has been minimized.

Copy link
Member Author

commented Aug 1, 2017

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

This comment has been minimized.

Copy link

commented Aug 2, 2017

@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

This comment has been minimized.

Copy link
Member Author

commented Aug 2, 2017

@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

This comment has been minimized.

Copy link

commented Aug 2, 2017

Excellent, thanks for the clarification

@rAugustos

This comment has been minimized.

Copy link

commented Aug 13, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Aug 13, 2017

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.

@zaken

This comment has been minimized.

Copy link

commented Aug 14, 2017

Is there an ETA for 1.0?

@rAugustos

This comment has been minimized.

Copy link

commented Aug 20, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Aug 21, 2017

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

This comment has been minimized.

Copy link

commented Aug 28, 2017

@Atinux tell please, is it possible to make a layout/page/component with ssr:false

It will be really handy, for example there is the onsen-ui framework, if you are visiting the site from mobile, I want to disable ssr (since onsen-ui only may works on the client side) and return the layout for mobiles (with ssr option false)

Thank in advance!

@Atinux

This comment has been minimized.

Copy link
Member Author

commented Aug 29, 2017

@TheDeveloperTom we decided to avoid this direction since it was too complex and was going to create more bugs.

Actually I don't think it should be so hard to make a PR to onsen-ui to make it SSR compatible instead :)

@Atinux Atinux closed this Aug 29, 2017

@Atinux Atinux reopened this Aug 29, 2017

@TheDeveloperTom

This comment has been minimized.

Copy link

commented Aug 29, 2017

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

@Atinux

This comment has been minimized.

Copy link
Member Author

commented Aug 29, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Aug 29, 2017

@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

This comment has been minimized.

Copy link

commented Aug 29, 2017

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

@pi0

This comment has been minimized.

Copy link
Member

commented Aug 29, 2017

@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

This comment has been minimized.

Copy link

commented Sep 2, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Sep 4, 2017

@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

This comment has been minimized.

Copy link

commented Sep 5, 2017

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

@uptownhr

This comment has been minimized.

Copy link
Contributor

commented Sep 10, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Nov 11, 2017

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

This comment has been minimized.

Copy link
Member Author

commented Nov 13, 2017

@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

This comment has been minimized.

Copy link
Contributor

commented Nov 16, 2017

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

This comment has been minimized.

Copy link

commented Nov 17, 2017

@dotnetCarpenter thanks man.

@ansarizafar

This comment has been minimized.

Copy link

commented Nov 26, 2017

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

@weotch

This comment has been minimized.

Copy link

commented Apr 23, 2018

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

@billjwolff

This comment has been minimized.

Copy link

commented May 1, 2018

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

This comment has been minimized.

Copy link

commented Nov 1, 2018

@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

This comment has been minimized.

Copy link

commented Apr 19, 2019

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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.