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

How to use seperate/adpative template for Desktop and mobile web #2223

Closed
fahidmohammad opened this Issue Nov 24, 2017 · 8 comments

Comments

Projects
None yet
4 participants
@fahidmohammad

fahidmohammad commented Nov 24, 2017

Im looking for an option to have a separate template for both Desktop and Mobile Web.

Note: Not a responsive template rather a complete separate template based on device detection.

Example: https://www.cleartrip.com try this site on desktop and mobile, its an adaptive layout.

This question is available on Nuxt.js community (#c1955)

@fahidmohammad fahidmohammad changed the title from Option to have destop and mobile adpative template to How to use seperate/adpative template for Desktop and mobile web Nov 24, 2017

@clarkdo

This comment has been minimized.

Member

clarkdo commented Nov 25, 2017

I suggest you can use plugin to detect if device is browser and mobile, and set device type into store.

Then use async and dynamic component to load different component and layout, maybe sth like:

<template>
  <div>
    <component :is="component"/>
  </div>
</template>

<script>
export default {
  layout: () => this.$store.state.device ? 'mobile' : 'default',
  components: {
    'mobile': () => import('./mobile-component'),
    'browser': () => import('./browser-component')
  },
  beforeCreate() {
    this.component = this.$store.state.device
  }
}
</script>
@fahidmohammad

This comment has been minimized.

fahidmohammad commented Nov 26, 2017

Some what i did this for now, not sure whether its a better way of handling things.

const { Nuxt, Builder } = require('nuxt')
const express = require('express');
const app = express()
const path = require('path')
const dc = require('./libs/device-check')
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)


// Import and Set Nuxt.js options
let mobileConfig = require('./app/mobile/nuxt.config.js')
let desktopConfig = require('./app/desktop/nuxt.config.js')


mobileConfig.dev = !(process.env.NODE_ENV === 'production')
desktopConfig.dev = !(process.env.NODE_ENV === 'production')

// Init Nuxt.js
const nuxtMobile = new Nuxt(mobileConfig)
const nuxtDesktop = new Nuxt(desktopConfig)

// Build only in dev mode
if (mobileConfig.dev) {
  const builder = new Builder(nuxtMobile)
  builder.build()
}
if (desktopConfig.dev) {
  const builder = new Builder(nuxtDesktop)
  builder.build()
}
app.use(express.static(path.join(__dirname, 'static')));
// Give nuxt middleware to express
app.use(function (req, res, next) {
	if(dc(req)==='v1'){ 
		console.log('Mobile')
		nuxtMobile.render(req, res)	  
	}else{
		console.log('Desktop')
		nuxtDesktop.render(req, res)
	}
})

// Listen the server
app.listen(port, host)
console.log('Server listening on ' + host + ':' + port) 

#1785

@pauldariye

This comment has been minimized.

pauldariye commented Mar 1, 2018

@clarkdo, trying to implement something similar to what you have in the example you shared above but it's not working. I'm unable to access the $store in layout(). Am I missing something perhaps? Re-read the docs as well but can't tell for sure.

@qm3ster

This comment has been minimized.

Collaborator

qm3ster commented Mar 1, 2018

@clarkdo How would that work with arrow functions? Isn't the this unbound?

export default {
  layout: () => this.$store.state.device ? 'mobile' : 'default'
}

isn't it mandatory that it is

export default {
  layout() { return this.$store.state.device ? 'mobile' : 'default' }
}

OR

export default {
  layout: function() { return this.$store.state.device ? 'mobile' : 'default' }
}

instead?

I am asking because I am genuinely unsure, but I think the arrow function can never be bound afterwards.

Maybe that's @pauldariye's problem.

@pauldariye

This comment has been minimized.

pauldariye commented Mar 1, 2018

I got it to work with a simple middleware @qm3ster. And I used essentially what @clarkdo recommended.

file: middleware/layout.js

export default function (context) {
  const { app: { store } } = context
    if (store.state.page.layout) {
       context.layout = store.state.page.layout
     } else {
       context.layout = 'default'
     }
}

I'm setting the state layout property from the cms.

@qm3ster

This comment has been minimized.

Collaborator

qm3ster commented Mar 2, 2018

That makes sense.

@clarkdo

This comment has been minimized.

Member

clarkdo commented Mar 2, 2018

@qm3ster
You are right, arrow is not appropriate here, your solution is good, thank you!

@lock

This comment has been minimized.

lock bot commented Nov 4, 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked as resolved and limited conversation to collaborators Nov 4, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.