diff --git a/How to/Restrict file downloading/.babelrc b/How to/Restrict file downloading/.babelrc
new file mode 100644
index 0000000..db71017
--- /dev/null
+++ b/How to/Restrict file downloading/.babelrc
@@ -0,0 +1,6 @@
+{
+ "presets": [
+ ["env", { "modules": false }],
+ "stage-3"
+ ]
+}
diff --git a/How to/Restrict file downloading/.editorconfig b/How to/Restrict file downloading/.editorconfig
new file mode 100644
index 0000000..9f73416
--- /dev/null
+++ b/How to/Restrict file downloading/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/How to/Restrict file downloading/.gitignore b/How to/Restrict file downloading/.gitignore
new file mode 100644
index 0000000..6b73228
--- /dev/null
+++ b/How to/Restrict file downloading/.gitignore
@@ -0,0 +1,12 @@
+.DS_Store
+node_modules/
+dist/
+npm-debug.log
+yarn-error.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/How to/Restrict file downloading/README.md b/How to/Restrict file downloading/README.md
new file mode 100644
index 0000000..13699ac
--- /dev/null
+++ b/How to/Restrict file downloading/README.md
@@ -0,0 +1,18 @@
+# Getting Started
+
+> A Vue.js project
+
+## Build Setup
+
+``` bash
+# install dependencies
+npm install
+
+# serve with hot reload at localhost:8080
+npm run dev
+
+# build for production with minification
+npm run build
+```
+
+For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
diff --git a/How to/Restrict file downloading/index.html b/How to/Restrict file downloading/index.html
new file mode 100644
index 0000000..0a15c45
--- /dev/null
+++ b/How to/Restrict file downloading/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ quickstart
+
+
+
+
+
+
+
+
+
+
diff --git a/How to/Restrict file downloading/package.json b/How to/Restrict file downloading/package.json
new file mode 100644
index 0000000..5910e39
--- /dev/null
+++ b/How to/Restrict file downloading/package.json
@@ -0,0 +1,31 @@
+{
+ "name": "quickstart",
+ "description": "A Vue.js project",
+ "version": "1.0.0",
+ "scripts": {
+ "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
+ "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+ },
+ "dependencies": {
+ "@syncfusion/ej2-vue-pdfviewer": "^22.1.34",
+ "vue": "^2.5.11"
+ },
+ "browserslist": [
+ "> 1%",
+ "last 2 versions",
+ "not ie <= 8"
+ ],
+ "devDependencies": {
+ "babel-core": "^6.26.0",
+ "babel-loader": "^7.1.2",
+ "babel-preset-env": "^1.6.0",
+ "babel-preset-stage-3": "^6.24.1",
+ "cross-env": "^5.0.5",
+ "css-loader": "^0.28.7",
+ "file-loader": "^1.1.4",
+ "vue-loader": "^13.0.5",
+ "vue-template-compiler": "^2.4.4",
+ "webpack": "^3.6.0",
+ "webpack-dev-server": "^2.9.1"
+ }
+}
diff --git a/How to/Restrict file downloading/src/App.vue b/How to/Restrict file downloading/src/App.vue
new file mode 100644
index 0000000..2136750
--- /dev/null
+++ b/How to/Restrict file downloading/src/App.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/How to/Restrict file downloading/src/assets/logo.png b/How to/Restrict file downloading/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
Binary files /dev/null and b/How to/Restrict file downloading/src/assets/logo.png differ
diff --git a/How to/Restrict file downloading/src/main.js b/How to/Restrict file downloading/src/main.js
new file mode 100644
index 0000000..071c4b5
--- /dev/null
+++ b/How to/Restrict file downloading/src/main.js
@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import App from './App.vue'
+import { PdfViewerPlugin } from '@syncfusion/ej2-vue-pdfviewer';
+
+Vue.use(PdfViewerPlugin);
+
+new Vue({
+ el: '#app',
+ render: h => h(App)
+})
diff --git a/How to/Restrict file downloading/webpack.config.js b/How to/Restrict file downloading/webpack.config.js
new file mode 100644
index 0000000..76b2593
--- /dev/null
+++ b/How to/Restrict file downloading/webpack.config.js
@@ -0,0 +1,78 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+ entry: './src/main.js',
+ output: {
+ path: path.resolve(__dirname, './dist'),
+ publicPath: '/dist/',
+ filename: 'build.js'
+ },
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'vue-style-loader',
+ 'css-loader'
+ ],
+ }, {
+ test: /\.vue$/,
+ loader: 'vue-loader',
+ options: {
+ loaders: {
+ }
+ // other vue-loader options go here
+ }
+ },
+ {
+ test: /\.js$/,
+ loader: 'babel-loader',
+ exclude: /node_modules/
+ },
+ {
+ test: /\.(png|jpg|gif|svg)$/,
+ loader: 'file-loader',
+ options: {
+ name: '[name].[ext]?[hash]'
+ }
+ }
+ ]
+ },
+ resolve: {
+ alias: {
+ 'vue$': 'vue/dist/vue.esm.js'
+ },
+ extensions: ['*', '.js', '.vue', '.json']
+ },
+ devServer: {
+ historyApiFallback: true,
+ noInfo: true,
+ overlay: true
+ },
+ performance: {
+ hints: false
+ },
+ devtool: '#eval-source-map'
+}
+
+if (process.env.NODE_ENV === 'production') {
+ module.exports.devtool = '#source-map'
+ // http://vue-loader.vuejs.org/en/workflow/production.html
+ module.exports.plugins = (module.exports.plugins || []).concat([
+ new webpack.DefinePlugin({
+ 'process.env': {
+ NODE_ENV: '"production"'
+ }
+ }),
+ new webpack.optimize.UglifyJsPlugin({
+ sourceMap: true,
+ compress: {
+ warnings: false
+ }
+ }),
+ new webpack.LoaderOptionsPlugin({
+ minimize: true
+ })
+ ])
+}