Skip to content

Commit da30165

Browse files
redxtechredxtech
committed
add nuxt example
1 parent 48fed59 commit da30165

File tree

12 files changed

+8043
-0
lines changed

12 files changed

+8043
-0
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
33
/dist
4+
.nuxt
45

56
# local env files
67
.env.local

‎examples/nuxt/.editorconfig

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# editorconfig.org
2+
root = true
3+
4+
[*]
5+
indent_style = space
6+
indent_size = 2
7+
end_of_line = lf
8+
charset = utf-8
9+
trim_trailing_whitespace = true
10+
insert_final_newline = true
11+
12+
[*.md]
13+
trim_trailing_whitespace = false

‎examples/nuxt/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# vue-plyr-nuxt
2+
3+
> An example of how to use vue-plyr with nuxt.
4+
5+
## Build Setup
6+
7+
``` bash
8+
# install dependencies
9+
$ yarn install
10+
11+
# serve with hot reload at localhost:3000
12+
$ yarn dev
13+
14+
# build for production and launch server
15+
$ yarn build
16+
$ yarn start
17+
18+
# generate static project
19+
$ yarn generate
20+
```
21+
22+
For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

‎examples/nuxt/layouts/default.vue

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<nuxt />
4+
</div>
5+
</template>

‎examples/nuxt/nuxt.config.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
module.exports = {
2+
mode: 'universal',
3+
/*
4+
** Headers of the page
5+
*/
6+
head: {
7+
title: process.env.npm_package_name || '',
8+
meta: [
9+
{ charset: 'utf-8' },
10+
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
11+
{ hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
12+
],
13+
link: [
14+
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
15+
]
16+
},
17+
/*
18+
** Customize the progress-bar color
19+
*/
20+
loading: { color: '#fff' },
21+
/*
22+
** Global CSS
23+
*/
24+
css: [
25+
'plyr/dist/plyr.css'
26+
],
27+
/*
28+
** Plugins to load before mounting the App
29+
*/
30+
plugins: [
31+
'~/plugins/vue-plyr'
32+
],
33+
/*
34+
** Nuxt.js dev-modules
35+
*/
36+
buildModules: [],
37+
/*
38+
** Nuxt.js modules
39+
*/
40+
modules: [],
41+
/*
42+
** Build configuration
43+
*/
44+
build: {
45+
/*
46+
** You can extend webpack config here
47+
*/
48+
extend (config, ctx) {
49+
}
50+
}
51+
}

‎examples/nuxt/package.json

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "vue-plyr-nuxt",
3+
"version": "1.0.0",
4+
"description": "An example of how to use vue-plyr with nuxt.",
5+
"author": "Gabe Dunn",
6+
"private": true,
7+
"scripts": {
8+
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
9+
"build": "nuxt build",
10+
"start": "cross-env NODE_ENV=production node server/index.js",
11+
"generate": "nuxt generate"
12+
},
13+
"dependencies": {
14+
"cross-env": "^5.2.0",
15+
"koa": "^2.6.2",
16+
"nuxt": "^2.0.0",
17+
"plyr": "^3.5.6",
18+
"vue-plyr": "^6.0.3"
19+
},
20+
"devDependencies": {
21+
"nodemon": "^1.18.9"
22+
}
23+
}

‎examples/nuxt/pages/index.vue

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<template>
2+
<div id="app">
3+
<h1>Video Player</h1>
4+
<vue-plyr>
5+
<video
6+
crossorigin
7+
playsinline
8+
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
9+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
10+
>
11+
<source
12+
size="576"
13+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
14+
type="video/mp4"
15+
>
16+
<source
17+
size="720"
18+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
19+
type="video/mp4"
20+
>
21+
<source
22+
size="1080"
23+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
24+
type="video/mp4"
25+
>
26+
<track
27+
default
28+
kind="captions"
29+
label="English"
30+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
31+
srclang="en"
32+
>
33+
<track
34+
kind="captions"
35+
label="Français"
36+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
37+
srclang="fr"
38+
>
39+
<a
40+
download=""
41+
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
42+
>
43+
Download
44+
</a>
45+
46+
</video>
47+
</vue-plyr>
48+
49+
<h1>Audio Player</h1>
50+
<vue-plyr>
51+
<audio
52+
crossorigin
53+
playsinline
54+
>
55+
<source
56+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
57+
type="audio/mp3"
58+
>
59+
<source
60+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
61+
type="audio/ogg"
62+
>
63+
</audio>
64+
</vue-plyr>
65+
66+
<h1>YouTube</h1>
67+
<vue-plyr>
68+
<div class="plyr__video-embed">
69+
<iframe
70+
allow="autoplay"
71+
allowfullscreen
72+
allowtransparency
73+
src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
74+
/>
75+
</div>
76+
</vue-plyr>
77+
78+
<h1>Vimeo</h1>
79+
<vue-plyr>
80+
<div class="plyr__video-embed">
81+
<iframe
82+
allow="autoplay"
83+
allowfullscreen
84+
allowtransparency
85+
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
86+
/>
87+
</div>
88+
</vue-plyr>
89+
90+
<h1>YouTube (Not Progressive Enhancement)</h1>
91+
<vue-plyr>
92+
<div
93+
data-plyr-embed-id="bTqVqk7FSmY"
94+
data-plyr-provider="youtube"
95+
/>
96+
</vue-plyr>
97+
98+
<h1>Vimeo (Not Progressive Enhancement)</h1>
99+
<vue-plyr>
100+
<div
101+
data-plyr-embed-id="76979871"
102+
data-plyr-provider="vimeo"
103+
/>
104+
</vue-plyr>
105+
</div>
106+
</template>
107+
108+
<style>
109+
#app {
110+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
111+
-webkit-font-smoothing: antialiased;
112+
-moz-osx-font-smoothing: grayscale;
113+
text-align: center;
114+
color: #2c3e50;
115+
margin-top: 60px;
116+
}
117+
</style>

‎examples/nuxt/plugins/vue-plyr.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import Vue from 'vue'
2+
import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'
3+
4+
// The second argument is optional and sets the default config values for every player.
5+
Vue.use(VuePlyr, {
6+
plyr: {
7+
fullscreen: { enabled: false }
8+
},
9+
emit: ['ended']
10+
})

‎examples/nuxt/server/index.js

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
const Koa = require('koa')
2+
const consola = require('consola')
3+
const { Nuxt, Builder } = require('nuxt')
4+
5+
const app = new Koa()
6+
7+
// Import and Set Nuxt.js options
8+
const config = require('../nuxt.config.js')
9+
config.dev = app.env !== 'production'
10+
11+
async function start () {
12+
// Instantiate nuxt.js
13+
const nuxt = new Nuxt(config)
14+
15+
const {
16+
host = process.env.HOST || '127.0.0.1',
17+
port = process.env.PORT || 3000
18+
} = nuxt.options.server
19+
20+
// Build in development
21+
if (config.dev) {
22+
const builder = new Builder(nuxt)
23+
await builder.build()
24+
} else {
25+
await nuxt.ready()
26+
}
27+
28+
app.use((ctx) => {
29+
ctx.status = 200
30+
ctx.respond = false // Bypass Koa's built-in response handling
31+
ctx.req.ctx = ctx // This might be useful later on, e.g. in nuxtServerInit or with nuxt-stash
32+
nuxt.render(ctx.req, ctx.res)
33+
})
34+
35+
app.listen(port, host)
36+
consola.ready({
37+
message: `Server listening on http://${host}:${port}`,
38+
badge: true
39+
})
40+
}
41+
42+
start()

‎examples/nuxt/static/README.md

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# STATIC
2+
3+
**This directory is not required, you can delete it if you don't want to use it.**
4+
5+
This directory contains your static files.
6+
Each file inside this directory is mapped to `/`.
7+
Thus you'd want to delete this README.md before deploying to production.
8+
9+
Example: `/static/robots.txt` is mapped as `/robots.txt`.
10+
11+
More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#static).

‎examples/nuxt/static/favicon.ico

1.36 KB
Binary file not shown.

0 commit comments

Comments
 (0)