├── .gitignore ├── README.md ├── external-configuration ├── README.md ├── config │ ├── default.json │ └── production.json ├── nuxt.config.js ├── package.json └── pages │ └── index.vue ├── mobile-desktop-with-store ├── README.md ├── components │ ├── Desktop.vue │ └── Mobile.vue ├── layouts │ └── default.vue ├── package.json ├── pages │ └── index.vue └── store │ └── index.js ├── mobile-desktop ├── README.md ├── components │ ├── Desktop.vue │ └── Mobile.vue ├── layouts │ └── default.vue ├── middleware │ └── is-mobile.js ├── nuxt.config.js ├── package.json └── pages │ └── index.vue └── sitemap ├── README.md ├── nuxt.config.js ├── package.json ├── pages └── index.vue ├── server.js └── xml └── sitemap.js /.gitignore: -------------------------------------------------------------------------------- 1 | /.idea/ 2 | /*/.nuxt/ 3 | /*/node_modules/ 4 | /*/npm-debug.log 5 | /sitemap/server.prod.js 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js examples 2 | 3 | * [mobile / desktop components](https://github.com/awronski/nuxtjs-examples/tree/master/mobile-desktop) conditional components in pages using middleware 4 | * [mobile / desktop layout](https://github.com/awronski/nuxtjs-examples/tree/master/mobile-desktop-with-store) conditional components in layout using store 5 | * [external configuration](https://github.com/awronski/nuxtjs-examples/tree/master/external-configuration) loading external configuration during application startup and putting it in the context 6 | * [sitemap](https://github.com/awronski/nuxtjs-examples/tree/master/sitemap) generating server site sitemap.xml 7 | 8 | -------------------------------------------------------------------------------- /external-configuration/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js - External Configuration 2 | 3 | Loading during application startup and putting it in the ```context.env```. 4 | Two diffrent configuration, one for development, one for production. 5 | 6 | Type ``nuxt`` to start a demo. -------------------------------------------------------------------------------- /external-configuration/config/default.json: -------------------------------------------------------------------------------- 1 | { 2 | "apiBackend": { 3 | "url": "development.domain.com", 4 | "port": 8000 5 | } 6 | } -------------------------------------------------------------------------------- /external-configuration/config/production.json: -------------------------------------------------------------------------------- 1 | { 2 | "apiBackend": { 3 | "url": "production.domain.com", 4 | "port": 80 5 | } 6 | } -------------------------------------------------------------------------------- /external-configuration/nuxt.config.js: -------------------------------------------------------------------------------- 1 | const config = require('config'); 2 | const backend = config.get('apiBackend'); 3 | 4 | module.exports = { 5 | env: backend 6 | } -------------------------------------------------------------------------------- /external-configuration/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "external-configuration", 3 | "dependencies": { 4 | "config": "latest", 5 | "nuxt": "latest" 6 | }, 7 | "scripts": { 8 | "dev": "nuxt", 9 | "build": "cross-env NODE_ENV=production nuxt build", 10 | "start": "nuxt start" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /external-configuration/pages/index.vue: -------------------------------------------------------------------------------- 1 | 12 | 13 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js - Mobile / Desktop components switching in the layout file using ```Store``` 2 | 3 | Type ``nuxt`` to start a demo. -------------------------------------------------------------------------------- /mobile-desktop-with-store/components/Desktop.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/components/Mobile.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mobile-desktop-with-store", 3 | "dependencies": { 4 | "nuxt": "latest" 5 | }, 6 | "scripts": { 7 | "dev": "nuxt", 8 | "build": "nuxt build", 9 | "start": "nuxt start" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/pages/index.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /mobile-desktop-with-store/store/index.js: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | 3 | const checkIfMobile = (context) => { 4 | const userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent 5 | let mobile = false; 6 | (function (a) { 7 | if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) mobile = true; 8 | })(userAgent) 9 | return mobile 10 | } 11 | 12 | export default new Vuex.Store({ 13 | 14 | state: { 15 | isMobile: false 16 | }, 17 | 18 | getters: { 19 | isMobile: state => state.isMobile 20 | }, 21 | 22 | actions: { 23 | nuxtServerInit ({commit}, context) { 24 | commit('changeMobile', checkIfMobile(context)) 25 | }, 26 | }, 27 | 28 | mutations: { 29 | changeMobile (state, isMobile) { 30 | state.isMobile = isMobile 31 | } 32 | } 33 | 34 | }) 35 | -------------------------------------------------------------------------------- /mobile-desktop/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js - Mobile / Desktop 2 | Components switching in the pages using middleware. 3 | 4 | Type ``nuxt`` to start a demo. -------------------------------------------------------------------------------- /mobile-desktop/components/Desktop.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /mobile-desktop/components/Mobile.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /mobile-desktop/layouts/default.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | -------------------------------------------------------------------------------- /mobile-desktop/middleware/is-mobile.js: -------------------------------------------------------------------------------- 1 | export default function (context) { 2 | const userAgent = context.isServer ? context.req.headers['user-agent'] : navigator.userAgent 3 | let mobile = false; 4 | (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) mobile = true;})(userAgent) 5 | context.isMobile = mobile 6 | } 7 | -------------------------------------------------------------------------------- /mobile-desktop/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | router: { 3 | middleware: ['is-mobile'] 4 | } 5 | } -------------------------------------------------------------------------------- /mobile-desktop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mobile-desktop", 3 | "dependencies": { 4 | "nuxt": "latest" 5 | }, 6 | "scripts": { 7 | "dev": "nuxt", 8 | "build": "nuxt build", 9 | "start": "nuxt start" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /mobile-desktop/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /sitemap/README.md: -------------------------------------------------------------------------------- 1 | # Nuxt.js - Sitemap.xml example using nuxt as express middleware 2 | 3 | Type ``npm run dev`` to start a demo. -------------------------------------------------------------------------------- /sitemap/nuxt.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | head: { 3 | title: 'nuxt sitemap example', 4 | meta: [ 5 | { charset: 'utf-8' }, 6 | { name: 'viewport', content: 'width=device-width, initial-scale=1' } 7 | ] 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /sitemap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-sitemap-example", 3 | "version": "1.0.0", 4 | "description": "nuxt sitemap example", 5 | "scripts": { 6 | "dev": "nodemon --exec babel-node -w server.js -w nuxt.config.js -w xml/ server.js", 7 | "build": "nuxt build && babel server.js --out-file server.prod.js", 8 | "start": "cross-env NODE_ENV=production node server.prod.js" 9 | }, 10 | "babel": { 11 | "presets": [ 12 | "es2015", 13 | "stage-2" 14 | ] 15 | }, 16 | "dependencies": { 17 | "cross-env": "latest", 18 | "express": "latest", 19 | "nuxt": "latest", 20 | "xml": "latest" 21 | }, 22 | "devDependencies": { 23 | "babel-cli": "^6.22.2", 24 | "babel-preset-es2015": "^6.22.0", 25 | "babel-preset-stage-2": "^6.22.0", 26 | "nodemon": "latest" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /sitemap/pages/index.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /sitemap/server.js: -------------------------------------------------------------------------------- 1 | const Nuxt = require('nuxt') 2 | const app = require('express')() 3 | const host = process.env.HOST || '127.0.0.1' 4 | const port = process.env.PORT || 3000 5 | 6 | app.set('port', port) 7 | app.get('/sitemap.xml', require('./xml/sitemap.js')) 8 | 9 | let config = require('./nuxt.config.js') 10 | config.dev = !(process.env.NODE_ENV === 'production') 11 | 12 | const nuxt = new Nuxt(config) 13 | app.use(nuxt.render) 14 | 15 | if (config.dev) { 16 | nuxt.build() 17 | .catch((error) => { 18 | console.error(error) 19 | process.exit(1) 20 | }) 21 | } 22 | 23 | app.listen(port, host) 24 | console.log('Server listening on ' + host + ':' + port) 25 | -------------------------------------------------------------------------------- /sitemap/xml/sitemap.js: -------------------------------------------------------------------------------- 1 | const xml = require('xml'); 2 | 3 | const pages = [ 4 | 'http://somenotexistingdomain.com/1.html', 5 | 'http://somenotexistingdomain.com/2.html', 6 | 'http://somenotexistingdomain.com/3.html', 7 | 'http://somenotexistingdomain.com/4.html' 8 | ] 9 | 10 | const sitemap = 11 | { 12 | urlset: [ 13 | { _attr: { xmlns: 'http://www.sitemaps.org/schemas/sitemap/0.9' } } 14 | ] 15 | } 16 | 17 | //retrive pages from database or some other internal system 18 | const retrivePages = () => { 19 | return pages 20 | } 21 | 22 | const generate = () => { 23 | const s = Object.assign({}, sitemap) 24 | retrivePages().forEach((p, idx) => { 25 | s.urlset[idx + 1] = {url: [{loc: p}, {changefreq: 'weekly'}]} 26 | }) 27 | 28 | return s 29 | } 30 | 31 | module.exports = function (req, res, next) { 32 | res.set('Content-Type', 'text/xml'); 33 | res.send(xml(generate(), { declaration: true })); 34 | } 35 | --------------------------------------------------------------------------------