Skip to content

Commit ae3dde2

Browse files
eahefnawyeahefnawy
authored
Merge pull request serverless#310 from adnanrahic/feature/vue-nuxt-ssr-example
Added example - Vue.js Nuxt.js Server(less)-side rendering
2 parents 3db81d5 + a28e2fe commit ae3dde2

File tree

18 files changed

+11243
-317
lines changed

18 files changed

+11243
-317
lines changed

‎README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@ serverless install -u https://github.com/serverless/examples/tree/master/folder-
7272
| [Aws Node Twilio Send Text Message](https://github.com/serverless/examples/tree/master/aws-node-twilio-send-text-message) <br/> Send a text message via twilio from aws lambda. [See live demo](http://twilio-serverless-example.surge.sh) | nodeJS |
7373
| [Typescript Example](https://github.com/serverless/examples/tree/master/aws-node-typescript-rest-api-with-dynamodb) | nodeJS |
7474
| [Upload To S3 And Postprocess](https://github.com/serverless/examples/tree/master/aws-node-upload-to-s3-and-postprocess) <br/> Upload a files to S3 to trigger a lambda function. | nodeJS |
75+
| [Aws Node Vue Nuxt Ssr](https://github.com/serverless/examples/tree/master/aws-node-vue-nuxt-ssr) <br/> Sample project for using Nuxt.js to create a server-side rendered Vue.js app on AWS Lambda and AWS API Gateway. Can easily integrate with your own API or 3rd party APIs such as headless CMS, e-commerce or serverless architecture. | nodeJS |
7576
| [Aws Alexa Skill](https://github.com/serverless/examples/tree/master/aws-python-alexa-skill) <br/> This example demonstrates how to use an AWS Lambdas for your custom Alexa skill. | python |
7677
| [Aws Auth0 Api Gateway](https://github.com/serverless/examples/tree/master/aws-python-auth0-custom-authorizers-api) <br/> Demonstration of protecting API gateway endpoints with auth0 | python |
7778
| [Aws Python Pynamodb S3 Sigurl](https://github.com/serverless/examples/tree/master/aws-python-pynamodb-s3-sigurl) <br/> Serverless signed uploader REST API using pynamodb, s3 generated events, custom log format, and DRY serverless.yml with custom section | python |
@@ -145,6 +146,7 @@ serverless install -u https://github.com/author/project -n my-project
145146
| **[Serverless Telegram Bot](https://github.com/jonatasbaldin/serverless-telegram-bot)** <br/> This example demonstrates how to setup an echo Telegram Bot using the Serverless Framework ⚡🤖 | [jonatasbaldin](http://github.com/jonatasbaldin) |
146147
| **[Serverless Ffmpeg](https://github.com/kvaggelakos/serverless-ffmpeg)** <br/> Bucket event driven FFMPEG using serverless. Input bucket => Serverless ffmpeg => Output bucket. | [kvaggelakos](http://github.com/kvaggelakos) |
147148
| **[Serverless Sns Api](https://github.com/eddielisc/serverless-sns-api)** <br/> Build a SNS service on AWS, support backend API for SNS by device, by group and by user | [eddielisc](http://github.com/eddielisc) |
149+
| **[Serverless Side Rendering With Vue.js And Nuxt.js](https://github.com/adnanrahic/serverless-side-rendering-vue-nuxt)** <br/> Sample project for using Nuxt.js to create a server-side rendered Vue.js app on AWS Lambda and AWS API Gateway. Can easily integrate with your own API or 3rd party APIs such as headless CMS, e-commerce or serverless architecture. | [adnanrahic](http://github.com/adnanrahic) |
148150
| **[Serving Binary Files](https://github.com/thomastoye/serverless-binary-files-xlsx)** <br/> Small example showing how to serve binary files using Serverless on AWS with the serverless-apigw-binary plugin, using generated Excel files as an example | [thomastoye](http://github.com/thomastoye) |
149151
| **[Stack Overflow Monitor](https://github.com/picsoung/stackoverflowmonitor)** <br/> Monitor Stack Overflow questions and post them in a Slack channel | [picsoung](http://github.com/picsoung) |
150152
| **[Adoptable Pet Bot](https://github.com/lynnaloo/adoptable-pet-bot)** <br/> Tweets adoptable pets using Serverless (Node.js) and AWS Lambda | [lynnaloo](http://github.com/lynnaloo) |

‎aws-node-vue-nuxt-ssr/.gitignore

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# package directories
2+
node_modules
3+
jspm_packages
4+
5+
# Serverless directories
6+
.serverless
7+
8+
# Nuxt directories
9+
.nuxt

‎aws-node-vue-nuxt-ssr/binaryMimeTypes.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
module.exports = [
2+
'application/javascript',
3+
'application/json',
4+
'application/octet-stream',
5+
'application/xml',
6+
'font/eot',
7+
'font/opentype',
8+
'font/otf',
9+
'image/jpeg',
10+
'image/png',
11+
'image/svg+xml',
12+
'text/comma-separated-values',
13+
'text/css',
14+
'text/html',
15+
'text/javascript',
16+
'text/plain',
17+
'text/text',
18+
'text/xml',
19+
];

‎aws-node-vue-nuxt-ssr/client/components/navbar.vue

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<nav class="nav">
3+
<ul>
4+
<li>
5+
<nuxt-link to="/">Home</nuxt-link>
6+
</li>
7+
<li>
8+
<nuxt-link to="/dogs">Dogs</nuxt-link>
9+
</li>
10+
<li>
11+
<nuxt-link to="/dogs/shepherd">Only Shepherds</nuxt-link>
12+
</li>
13+
</ul>
14+
</nav>
15+
</template>

‎aws-node-vue-nuxt-ssr/client/layouts/default.vue

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<template>
2+
<div>
3+
<navbar/>
4+
<nuxt/>
5+
</div>
6+
</template>
7+
<script>
8+
import navbar from "~/components/navbar";
9+
10+
export default {
11+
components: { navbar }
12+
};
13+
</script>

‎aws-node-vue-nuxt-ssr/client/pages/dogs/_breed.vue

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<template>
2+
<div>
3+
<h2>Dog breed: {{ breed }}</h2>
4+
<ul>
5+
<li v-for="dog in dogs" v-bind:key="dog.id">
6+
<img :src="dog.url" alt="">
7+
</li>
8+
</ul>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import axios from "axios";
14+
export default {
15+
async asyncData({ store, route }) {
16+
const { data } = await axios.get(
17+
"https://api.thedogapi.com/v1/images/search?size=thumb&has_breeds=true&limit=50"
18+
);
19+
20+
const reg = new RegExp(route.params.breed, "g");
21+
const filteredDogs = data.filter(dog =>
22+
dog.breeds[0]
23+
.name
24+
.toLowerCase()
25+
.match(reg)
26+
);
27+
28+
return { dogs: filteredDogs, breed: route.params.breed };
29+
},
30+
head() {
31+
return {
32+
title: `${this.breed} Dog`,
33+
meta: [
34+
{
35+
hid: "description",
36+
name: "description",
37+
content: `You are ${this.breed} hello 👋`
38+
}
39+
]
40+
};
41+
}
42+
};
43+
</script>

‎aws-node-vue-nuxt-ssr/client/pages/dogs/index.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<template>
2+
<div>
3+
<h1>Here you have all dogs.</h1>
4+
<ul>
5+
<li v-for="dog in dogs" v-bind:key="dog.id">
6+
<img :src="dog.url" alt="">
7+
</li>
8+
</ul>
9+
</div>
10+
</template>
11+
12+
<script>
13+
import axios from "axios";
14+
export default {
15+
async asyncData({ params }) {
16+
const { data } = await axios.get(
17+
"https://api.thedogapi.com/v1/images/search?size=thumb&limit=10"
18+
);
19+
return { dogs: data };
20+
},
21+
head() {
22+
return {
23+
title: "Show all dogs!",
24+
meta: [
25+
{
26+
hid: "description",
27+
name: "description",
28+
content: `Hello Dogs 👋`
29+
}
30+
]
31+
};
32+
}
33+
};
34+
</script>

‎aws-node-vue-nuxt-ssr/client/pages/index.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div>
3+
<h1>This is the Front Page.</h1>
4+
<h3>Random dog of the day:</h3>
5+
<img :src="dog.url" alt="">
6+
</div>
7+
</template>
8+
9+
<script>
10+
import axios from "axios";
11+
export default {
12+
async asyncData({ params }) {
13+
const { data } = await axios.get(
14+
"https://api.thedogapi.com/v1/images/search?limit=1"
15+
);
16+
return { dog: data[0] };
17+
}
18+
};
19+
</script>

‎aws-node-vue-nuxt-ssr/index.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const sls = require('serverless-http');
2+
const binaryMimeTypes = require('./binaryMimeTypes');
3+
const nuxt = require('./nuxt');
4+
5+
module.exports.nuxt = sls(nuxt, {
6+
binary: binaryMimeTypes,
7+
});

‎aws-node-vue-nuxt-ssr/nuxt.config.js

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const env = require('./secrets.json').NODE_ENV;
2+
3+
module.exports = {
4+
mode: 'universal',
5+
head: {
6+
title: 'Vue Nuxt Test',
7+
meta: [
8+
{ charset: 'utf-8' },
9+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
10+
{ hid: 'description', name: 'description', content: 'Nuxt.js project' },
11+
],
12+
},
13+
build: {
14+
vendor: ['axios'],
15+
publicPath: `/${env}/_nuxt/`,
16+
},
17+
srcDir: 'client/',
18+
performance: {
19+
gzip: false,
20+
},
21+
router: {
22+
base: '/',
23+
},
24+
dev: false,
25+
};

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy