├── .gitignore ├── README.md ├── cli.js ├── lib ├── cli.js ├── package.js ├── prompts.js ├── saofile.js └── util.js ├── package.json ├── saofile.js ├── template ├── README.md ├── _package.json ├── gitignore ├── next │ ├── README.md │ ├── _.env │ ├── _.eslintrc.js │ ├── _vuefront.config.js │ ├── assets │ │ ├── README.md │ │ └── img │ │ │ ├── logo_footer.svg │ │ │ └── logo_header.svg │ ├── components │ │ └── README.md │ ├── layouts │ │ ├── README.md │ │ ├── default.vue │ │ └── error.vue │ ├── locales │ │ └── README.md │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package.js │ ├── package.json │ ├── pages │ │ └── README.md │ ├── plugins │ │ └── README.md │ ├── static │ │ ├── README.md │ │ ├── favicon.ico │ │ └── icon.png │ ├── store │ │ ├── README.md │ │ └── index.js │ ├── stylelint.config.js │ └── tailwind.config.js ├── stable │ ├── README.md │ ├── _.env │ ├── _.eslintrc.js │ ├── _vuefront.config.js │ ├── assets │ │ ├── README.md │ │ └── img │ │ │ ├── logo_footer.svg │ │ │ └── logo_header.svg │ ├── components │ │ └── README.md │ ├── layouts │ │ ├── README.md │ │ ├── default.vue │ │ └── error.vue │ ├── locales │ │ └── README.md │ ├── middleware │ │ └── README.md │ ├── nuxt.config.js │ ├── package.js │ ├── package.json │ ├── pages │ │ └── README.md │ ├── plugins │ │ └── README.md │ ├── static │ │ ├── README.md │ │ ├── favicon.ico │ │ └── icon.png │ ├── store │ │ ├── README.md │ │ └── index.js │ ├── stylelint.config.js │ └── tailwind.config.js ├── vite-next │ ├── README.md │ ├── _.env │ ├── _.eslintrc.json │ ├── _vuefront.config.js │ ├── index.html │ ├── package.js │ ├── package.json │ ├── postcss.config.js │ ├── prerender.js │ ├── public │ │ └── favicon.ico │ ├── server.js │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── img │ │ │ │ ├── VUE_JS.svg │ │ │ │ └── VUE_JS_Footer.svg │ │ ├── entry-client.js │ │ ├── entry-server.js │ │ ├── env.d.ts │ │ ├── main.js │ │ ├── pages │ │ │ ├── README.md │ │ │ ├── component.vue │ │ │ └── molecules.vue │ │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ └── vite.config.ts └── vite-stable │ ├── README.md │ ├── _.env │ ├── _.eslintrc.json │ ├── _vuefront.config.js │ ├── index.html │ ├── package.js │ ├── package.json │ ├── postcss.config.js │ ├── prerender.js │ ├── public │ └── favicon.ico │ ├── server.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── img │ │ │ ├── VUE_JS.svg │ │ │ └── VUE_JS_Footer.svg │ ├── entry-client.js │ ├── entry-server.js │ ├── env.d.ts │ ├── main.js │ ├── pages │ │ ├── README.md │ │ ├── component.vue │ │ └── molecules.vue │ └── vite-env.d.ts │ ├── tailwind.config.js │ ├── tsconfig.json │ └── vite.config.ts └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create VueFront App 2 | 3 | This is a SAO generator for creating your VueFront App 4 | 5 | Step 1: Create VueFront App (you will need node >=8 installed. Yarn recommended) 6 | ```bash 7 | # the app folder name goes here or write ./ to launch the app in the root folder 8 | yarn create vuefront-app 9 | # OR npx create-vuefront-app 10 | ``` 11 | 12 | Step 2: Provide CMS Connect URL (The URL you get from the CMS Connect APP when you install it on one of your CMS like wordpress) 13 | 14 | CMS Connect URL example: https://wordpress.vuefront.com/wp-json/vuefront/v1/graphql 15 | 16 | Step 3: Build app in development 17 | 18 | ```bash 19 | yarn dev 20 | ``` 21 | 22 | For more details visit https://vuefront.com/guide/ 23 | Enjoy! 24 | -------------------------------------------------------------------------------- /cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const path = require('path') 4 | const sao = require('sao') 5 | 6 | const generator = path.resolve(__dirname, './') 7 | // In a custom directory or current directory 8 | const outDir = path.resolve(process.argv[2] || '.') 9 | 10 | console.log(`> Generating VueFront app in ${outDir}`) 11 | 12 | // See https://sao.js.org/#/advanced/standalone-cli 13 | sao({ generator, outDir, logLevel: 2 }) 14 | .run() 15 | .catch((err) => { 16 | console.trace(err) 17 | process.exit(1) 18 | }) -------------------------------------------------------------------------------- /lib/cli.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | const path = require('path') 3 | const fs = require('fs') 4 | const sao = require('sao') 5 | const cac = require('cac') 6 | const chalk = require('chalk') 7 | const envinfo = require('envinfo') 8 | const { version } = require('../package.json') 9 | 10 | const generator = path.resolve(__dirname, './') 11 | 12 | const cli = cac('create-vuefront-app') 13 | 14 | const showEnvInfo = async () => { 15 | console.log(chalk.bold('\nEnvironment Info:')) 16 | const result = await envinfo 17 | .run({ 18 | System: ['OS', 'CPU'], 19 | Binaries: ['Node', 'Yarn', 'npm'], 20 | Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'], 21 | npmGlobalPackages: ['create-vuefront-app'] 22 | }) 23 | console.log(result) 24 | process.exit(1) 25 | } 26 | 27 | const run = () => { 28 | cli 29 | .command('[out-dir]', 'Generate in a custom directory or current directory') 30 | .action((outDir = '.', cliOptions) => { 31 | if (cliOptions.info) { 32 | return showEnvInfo() 33 | } 34 | console.log() 35 | console.log(chalk`{cyan create-vuefront-app v${version}}`) 36 | 37 | const { answers, overwriteDir, verbose } = cliOptions 38 | if (fs.existsSync(outDir) && fs.readdirSync(outDir).length && !overwriteDir) { 39 | const baseDir = outDir === '.' ? path.basename(process.cwd()) : outDir 40 | return console.error(chalk.red( 41 | `Could not create project in ${chalk.bold(baseDir)} because the directory is not empty.`)) 42 | } 43 | 44 | console.log(chalk`✨ Generating VueFront project in {cyan ${outDir}}`) 45 | 46 | const logLevel = verbose ? 4 : 2 47 | // See https://sao.vercel.app/api.html#standalone-cli 48 | sao({ generator, outDir, logLevel, answers, cliOptions }) 49 | .run() 50 | .catch((err) => { 51 | console.trace(err) 52 | process.exit(1) 53 | }) 54 | }) 55 | 56 | cli.help() 57 | 58 | cli.version(version) 59 | 60 | cli.parse() 61 | } 62 | 63 | try { 64 | run() 65 | } catch (err) { 66 | // https://github.com/cacjs/cac/blob/f51fc2254d7ea30b4faea76f69f52fe291811e4f/src/utils.ts#L152 67 | // https://github.com/cacjs/cac/blob/f51fc2254d7ea30b4faea76f69f52fe291811e4f/src/Command.ts#L258 68 | if (err.name === 'CACError' && err.message.startsWith('Unknown option')) { 69 | console.error() 70 | console.error(chalk.red(err.message)) 71 | console.error() 72 | cli.outputHelp() 73 | } else { 74 | console.error() 75 | console.error(err) 76 | } 77 | process.exit(1) 78 | } -------------------------------------------------------------------------------- /lib/package.js: -------------------------------------------------------------------------------- 1 | const { merge, sortByKey } = require('./util') 2 | 3 | module.exports = { 4 | requireFile (filename) { 5 | try { 6 | return require(filename) 7 | } catch (error) { 8 | return {} 9 | } 10 | }, 11 | requireJSON (filename) { 12 | return JSON.parse(JSON.stringify(this.requireFile(filename))) 13 | }, 14 | loadPackage (name, generator) { 15 | if (!name || name === 'none') { 16 | return {} 17 | } 18 | const prefix = name === 'nuxt' ? 'nuxt' : `${name}` 19 | const pkg = this.requireJSON(`../template/${prefix}/package.json`) 20 | const pkgHandler = this.requireFile(`../template/${prefix}/package.js`) 21 | return pkgHandler.apply ? pkgHandler.apply(pkg, generator) : pkg 22 | }, 23 | load (generator) { 24 | let name = '' 25 | if (generator.answers.framework === 'vite') { 26 | name += 'vite-' 27 | } 28 | name += generator.answers.version 29 | const frameworkPkg = this.loadPackage(name, generator) 30 | const pkg = merge(frameworkPkg) 31 | pkg.dependencies = sortByKey(pkg.dependencies) 32 | pkg.devDependencies = sortByKey(pkg.devDependencies) 33 | return pkg 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /lib/prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [{ 2 | name: 'name', 3 | message: 'Project name', 4 | default: '{outFolder}' 5 | }, 6 | { 7 | name: 'description', 8 | message: 'Project description', 9 | default: `My VueFront App` 10 | }, 11 | { 12 | name: 'author', 13 | type: 'string', 14 | message: 'Author name', 15 | default: '{gitUser.name}', 16 | store: true 17 | }, 18 | { 19 | name: 'api', 20 | message: 'Paste the CMS Connect URL, provided by your CMS Connect App', 21 | default: '' 22 | }, 23 | { 24 | name: 'cors', 25 | message: 'Activate Cors (Cross-Origin Resource Sharing)', 26 | choices: ['true', 'false'], 27 | type: 'list', 28 | default: 'true' 29 | }, 30 | // { 31 | // name: 'theme', 32 | // message: 'Select VueFront theme', 33 | // choices: ['None'/*, 'opencart'*/], 34 | // type: 'list', 35 | // default: 'None' 36 | // }, 37 | { 38 | name: 'framework', 39 | message: 'Select framework', 40 | choices: ['vite', 'nuxt'], 41 | type: 'list', 42 | default: 'vite' 43 | }, 44 | { 45 | name: 'pm', 46 | message: 'Choose a package manager', 47 | choices: ['yarn', 'npm'], 48 | type: 'list', 49 | default: 'yarn' 50 | }, 51 | { 52 | name: 'version', 53 | message: 'Choose VueFront App version', 54 | choices: ['stable', 'next'], 55 | type: 'list', 56 | default: 'stable' 57 | } 58 | ] -------------------------------------------------------------------------------- /lib/saofile.js: -------------------------------------------------------------------------------- 1 | const { dirname, join, relative } = require('path') 2 | const fs = require('fs') 3 | const spawn = require('cross-spawn') 4 | const validate = require('validate-npm-package-name') 5 | const pkg = require('./package') 6 | 7 | const cnaTemplateDir = join(dirname(require.resolve('../package.json'))) 8 | const templateDir = join(cnaTemplateDir, 'template') 9 | 10 | module.exports = { 11 | prompts: require('./prompts'), 12 | templateData () { 13 | const pm = this.answers.pm === 'yarn' ? 'yarn' : 'npm' 14 | const pmRun = this.answers.pm === 'yarn' ? 'yarn' : 'npm run' 15 | return { 16 | pm, 17 | pmRun 18 | } 19 | }, 20 | actions () { 21 | const validation = validate(this.answers.name) 22 | validation.warnings && validation.warnings.forEach((warn) => { 23 | console.warn('Warning:', warn) 24 | }) 25 | validation.errors && validation.errors.forEach((err) => { 26 | console.error('Error:', err) 27 | }) 28 | validation.errors && validation.errors.length && process.exit(1) 29 | 30 | if (this.answers.cors == 'true') { 31 | this.answers.api = this.answers.api + (this.answers.api.split('?')[1] ? '&' : '?') + 'cors=true' 32 | } 33 | 34 | const actions = [] 35 | 36 | if(this.answers.version == 'stable'){ 37 | if (this.answers.framework === 'nuxt') { 38 | actions.push({ 39 | type: 'add', 40 | files: '**', 41 | templateDir: join(templateDir, 'stable') 42 | }) 43 | } 44 | 45 | if (this.answers.framework === 'vite') { 46 | actions.push({ 47 | type: 'add', 48 | files: '**', 49 | templateDir: join(templateDir, 'vite-stable') 50 | }) 51 | } 52 | } 53 | 54 | if(this.answers.version == 'next'){ 55 | if (this.answers.framework === 'nuxt') { 56 | actions.push({ 57 | type: 'add', 58 | files: '**', 59 | templateDir: join(templateDir, 'next') 60 | }) 61 | } 62 | 63 | if (this.answers.framework === 'vite') { 64 | actions.push({ 65 | type: 'add', 66 | files: '**', 67 | templateDir: join(templateDir, 'vite-next') 68 | }) 69 | } 70 | } 71 | actions.push({ 72 | type: 'add', 73 | files: '*', 74 | templateDir 75 | }) 76 | 77 | actions.push({ 78 | type: 'move', 79 | patterns: { 80 | gitignore: '.gitignore', 81 | '_package.json': 'package.json', 82 | '_.eslintrc.js': '.eslintrc.js', 83 | '_.eslintrc.json': '.eslintrc.json', 84 | '_.env': '.env', 85 | '_vuefront.config.js': 'vuefront.config.js' 86 | } 87 | }) 88 | const generator = this 89 | actions.push({ 90 | type: 'modify', 91 | files: 'package.json', 92 | handler (data) { 93 | return { ...data, ...pkg.load(generator) } 94 | } 95 | }) 96 | 97 | // For compiling package.json 98 | actions.push({ 99 | type: 'add', 100 | files: 'package.json', 101 | templateDir: this.outDir 102 | }) 103 | 104 | actions.push({ 105 | type: 'remove', 106 | files: 'package.js' 107 | }) 108 | return actions 109 | }, 110 | async completed () { 111 | await this.npmInstall({ npmClient: this.answers.pm }) 112 | 113 | const chalk = this.chalk 114 | const isNewFolder = this.outDir !== process.cwd() 115 | const relativeOutFolder = relative(process.cwd(), this.outDir) 116 | const cdMsg = isNewFolder ? chalk`\t{cyan cd ${relativeOutFolder}}\n` : '' 117 | const pmRun = this.answers.pm === 'yarn' ? 'yarn' : 'npm run' 118 | 119 | console.log(chalk`\n🎉 {bold Successfully created project} {cyan ${this.answers.name}}\n`) 120 | 121 | console.log(chalk` {bold To get started:}\n`) 122 | console.log(chalk`${cdMsg}\t{cyan ${pmRun} dev}\n`) 123 | 124 | console.log(chalk` {bold To build & start for production:}\n`) 125 | console.log(chalk`${cdMsg}\t{cyan ${pmRun} build}`) 126 | console.log(chalk`\t{cyan ${pmRun} start}\n`) 127 | } 128 | } -------------------------------------------------------------------------------- /lib/util.js: -------------------------------------------------------------------------------- 1 | const isObject = (value) => { 2 | return !!value && 3 | typeof value === 'object' && 4 | typeof value.getMonth !== 'function' && 5 | !Array.isArray(value) 6 | } 7 | 8 | const merge = (...sources) => { 9 | const [target, ...rest] = sources 10 | 11 | for (const object of rest) { 12 | for (const key in object) { 13 | const targetValue = target[key] 14 | const sourceValue = object[key] 15 | const isMergable = isObject(targetValue) && isObject(sourceValue) 16 | target[key] = isMergable ? merge({}, targetValue, sourceValue) : sourceValue 17 | } 18 | } 19 | 20 | return target 21 | } 22 | 23 | const sortByKey = (unsortedObject) => { 24 | const sortedObject = {} 25 | Object.keys(unsortedObject).sort().forEach((key) => { 26 | sortedObject[key] = unsortedObject[key] 27 | }) 28 | return sortedObject 29 | } 30 | 31 | module.exports = { 32 | isObject, 33 | merge, 34 | sortByKey 35 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-vuefront-app", 3 | "version": "0.6.1", 4 | "description": "Create a VueFront App in seconds.", 5 | "bin": "lib/cli.js", 6 | "files": [ 7 | "lib/", 8 | "template/" 9 | ], 10 | "scripts": { 11 | "test": "ava --verbose" 12 | }, 13 | "repository": { 14 | "type": "git", 15 | "url": "git+https://github.com/vuefront/create-vuefront-app.git" 16 | }, 17 | "dependencies": { 18 | "cross-spawn": "^7.0.3", 19 | "envinfo": "^7.8.1", 20 | "lodash": "^4.17.21", 21 | "sao": "^1.7.1", 22 | "validate-npm-package-name": "^3.0.0" 23 | }, 24 | "keywords": [ 25 | "vuefront", 26 | "vue frontend", 27 | "vue-frontend", 28 | "vue storefront", 29 | "vue-store", 30 | "vue-storefront", 31 | "dreamvention", 32 | "tailwind" 33 | ], 34 | "author": "VueFront", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/vuefront/create-vuefront-app/issues" 38 | }, 39 | "homepage": "https://github.com/vuefront/create-vuefront-app#readme" 40 | } 41 | -------------------------------------------------------------------------------- /saofile.js: -------------------------------------------------------------------------------- 1 | const validate = require('validate-npm-package-name') 2 | 3 | module.exports = { 4 | prompts: [{ 5 | name: 'name', 6 | message: 'Project name', 7 | default: '{outFolder}' 8 | }, 9 | { 10 | name: 'description', 11 | message: 'Project description', 12 | default: `My VueFront App` 13 | }, 14 | { 15 | name: 'author', 16 | type: 'string', 17 | message: 'Author name', 18 | default: '{gitUser.name}', 19 | store: true 20 | }, 21 | { 22 | name: 'api', 23 | message: 'Paste the CMS Connect URL, provided by your CMS Connect App', 24 | default: '' 25 | }, 26 | { 27 | name: 'cors', 28 | message: 'Activate Cors (Cross-Origin Resource Sharing)', 29 | choices: ['true', 'false'], 30 | type: 'list', 31 | default: 'true' 32 | }, 33 | // { 34 | // name: 'theme', 35 | // message: 'Select VueFront theme', 36 | // choices: ['None'/*, 'opencart'*/], 37 | // type: 'list', 38 | // default: 'None' 39 | // }, 40 | { 41 | name: 'framework', 42 | message: 'Select framework', 43 | choices: ['vite', 'nuxt'], 44 | type: 'list', 45 | default: 'nuxt' 46 | }, 47 | { 48 | name: 'pm', 49 | message: 'Choose a package manager', 50 | choices: ['yarn', 'npm'], 51 | type: 'list', 52 | default: 'yarn' 53 | }, 54 | { 55 | name: 'version', 56 | message: 'Choose VueFront App version', 57 | choices: ['stable', 'next'], 58 | type: 'list', 59 | default: 'stable' 60 | } 61 | 62 | ], 63 | templateData() { 64 | const edge = process.argv.includes('--edge') 65 | 66 | 67 | return { 68 | edge, 69 | } 70 | }, 71 | actions() { 72 | const validation = validate(this.answers.name) 73 | validation.warnings && validation.warnings.forEach((warn) => { 74 | console.warn('Warning:', warn) 75 | }) 76 | validation.errors && validation.errors.forEach((err) => { 77 | console.error('Error:', err) 78 | }) 79 | validation.errors && validation.errors.length && process.exit(1) 80 | 81 | 82 | if (this.answers.cors == 'true') { 83 | this.answers.api = this.answers.api + (this.answers.api.split('?')[1] ? '&' : '?') + 'cors=true' 84 | } 85 | 86 | const actions = [] 87 | 88 | if(this.answers.version == 'stable'){ 89 | if (this.answers.framework === 'nuxt') { 90 | actions.push({ 91 | type: 'add', 92 | files: '**', 93 | templateDir: 'template/stable' 94 | }) 95 | } 96 | 97 | if (this.answers.framework === 'vite') { 98 | actions.push({ 99 | type: 'add', 100 | files: '**', 101 | templateDir: 'template/vite-stable' 102 | }) 103 | } 104 | 105 | 106 | actions.push({ 107 | type: 'move', 108 | patterns: { 109 | gitignore: '.gitignore', 110 | '_package.json': 'package.json', 111 | '_.eslintrc.js': '.eslintrc.js', 112 | '_.eslintrc.json': '.eslintrc.json', 113 | '_.env': '.env', 114 | '_vuefront.config.js': 'vuefront.config.js' 115 | } 116 | }) 117 | } 118 | 119 | if(this.answers.version == 'next'){ 120 | if (this.answers.framework === 'nuxt') { 121 | actions.push({ 122 | type: 'add', 123 | files: '**', 124 | templateDir: 'template/next' 125 | }) 126 | } 127 | 128 | if (this.answers.framework === 'vite') { 129 | actions.push({ 130 | type: 'add', 131 | files: '**', 132 | templateDir: 'template/vite-next' 133 | }) 134 | } 135 | 136 | actions.push({ 137 | type: 'move', 138 | patterns: { 139 | gitignore: '.gitignore', 140 | '_package.json': 'package.json', 141 | '_.eslintrc.js': '.eslintrc.js', 142 | '_.env': '.env', 143 | '_vuefront.config.js': 'vuefront.config.js' 144 | } 145 | }) 146 | } 147 | 148 | return actions 149 | }, 150 | async completed() { 151 | this.gitInit() 152 | 153 | 154 | await this.npmInstall({ npmClient: this.answers.pm }) 155 | 156 | const isNewFolder = this.outDir !== process.cwd() 157 | const cd = () => { 158 | if (isNewFolder) { 159 | console.log(`\t${this.chalk.cyan('cd')} ${this.outFolder}`) 160 | } 161 | } 162 | 163 | console.log() 164 | console.log(this.chalk.bold(` To get started:\n`)) 165 | cd() 166 | console.log(`\t${this.answers.pm} run dev\n`) 167 | console.log(this.chalk.bold(` To build & start for production:\n`)) 168 | cd() 169 | console.log(`\t${this.answers.pm} run build`) 170 | console.log(`\t${this.answers.pm} start`) 171 | 172 | if (this.answers.test !== 'none') { 173 | console.log(this.chalk.bold(`\n To test:\n`)) 174 | cd() 175 | console.log(`\t${this.answers.pm} run test`) 176 | } 177 | console.log() 178 | } 179 | } -------------------------------------------------------------------------------- /template/README.md: -------------------------------------------------------------------------------- 1 | # <%= name %> 2 | 3 | > <%= description %> 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | $ <%= pm %> install 10 | 11 | # serve with hot reload at localhost:3000 12 | $ <%= pm %> run dev 13 | 14 | # build for production and launch server 15 | $ <%= pm %> run build 16 | $ <%= pm %> start 17 | 18 | # generate static project 19 | $ <%= pm %> run generate 20 | ``` 21 | 22 | For detailed explanation on how things work, checkout [Nuxt.js docs](https://nuxtjs.org). 23 | -------------------------------------------------------------------------------- /template/_package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "<%= name %>", 3 | "version": "1.0.0", 4 | "private": true 5 | } -------------------------------------------------------------------------------- /template/gitignore: -------------------------------------------------------------------------------- 1 | # Created by .ignore support plugin (hsz.mobi) 2 | ### Node template 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | 10 | # Runtime data 11 | pids 12 | *.pid 13 | *.seed 14 | *.pid.lock 15 | 16 | # Directory for instrumented libs generated by jscoverage/JSCover 17 | lib-cov 18 | 19 | # Coverage directory used by tools like istanbul 20 | coverage 21 | 22 | # nyc test coverage 23 | .nyc_output 24 | 25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 26 | .grunt 27 | 28 | # Bower dependency directory (https://bower.io/) 29 | bower_components 30 | 31 | # node-waf configuration 32 | .lock-wscript 33 | 34 | # Compiled binary addons (https://nodejs.org/api/addons.html) 35 | build/Release 36 | 37 | # Dependency directories 38 | node_modules/ 39 | jspm_packages/ 40 | 41 | # TypeScript v1 declaration files 42 | typings/ 43 | 44 | # Optional npm cache directory 45 | .npm 46 | 47 | # Optional eslint cache 48 | .eslintcache 49 | 50 | # Optional REPL history 51 | .node_repl_history 52 | 53 | # Output of 'npm pack' 54 | *.tgz 55 | 56 | # Yarn Integrity file 57 | .yarn-integrity 58 | 59 | # dotenv environment variables file 60 | .env 61 | 62 | # parcel-bundler cache (https://parceljs.org/) 63 | .cache 64 | 65 | # next.js build output 66 | .next 67 | 68 | # nuxt.js build output 69 | .nuxt 70 | 71 | # Nuxt generate 72 | dist 73 | 74 | # vuepress build output 75 | .vuepress/dist 76 | 77 | # Serverless directories 78 | .serverless 79 | 80 | # IDE 81 | .idea 82 | 83 | # Service worker 84 | sw.* 85 | -------------------------------------------------------------------------------- /template/next/README.md: -------------------------------------------------------------------------------- 1 | # VueFront Template 2 | This is a VueFornt starter app. It has everything you need to setup a default VueFront App. 3 | 4 | More information about the usage of create VueFront App in [the documentation](https://vuefront.com/). 5 | -------------------------------------------------------------------------------- /template/next/_.env: -------------------------------------------------------------------------------- 1 | API_URL=<%- api %> 2 | FEATURED_PRODUCT="[]" 3 | BASE_URL=/ -------------------------------------------------------------------------------- /template/next/_.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | "prettier", 4 | "plugin:prettier/recommended", 5 | ], 6 | plugins: ["prettier"], 7 | rules: { 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /template/next/_vuefront.config.js: -------------------------------------------------------------------------------- 1 | export default {<% 2 | if (theme !== 'None') { %> 3 | theme: '@vuefront/theme-<%= theme %>',<% } %> 4 | image: { 5 | logo: { 6 | path: '~/assets/img/logo_header.svg' 7 | }, 8 | footerLogo: { 9 | path: '~/assets/img/logo_footer.svg' 10 | }, 11 | }, 12 | layouts: { 13 | '*': { 14 | headerMenu: [ 15 | [ 16 | 'Menu', 17 | { 18 | items: ['store', 'blog'] 19 | } 20 | ] 21 | ], 22 | footerLeft: ['Pages'], 23 | footerCenter: ['AccountLinks'], 24 | footerRight: [ 25 | [ 26 | 'ExtraLinks', 27 | { 28 | links: [ 29 | { 30 | to: '/store/special', 31 | text: 'Special' 32 | }, 33 | { 34 | to: '/store/compare', 35 | text: 'Compare' 36 | }, 37 | { 38 | to: '/contact', 39 | text: 'Contact Us' 40 | } 41 | ] 42 | } 43 | ] 44 | ] 45 | }, 46 | '/': { 47 | contentTop: [ 48 | [ 49 | 'Slideshow', 50 | { 51 | sliderNav: true, 52 | sliderArrows: true, 53 | items: [ 54 | 'https://img.dreamvention.com/vuefront/banners/Banner_demo_1.jpg', 55 | 'https://img.dreamvention.com/vuefront/banners/Banner_demo_2.jpg' 56 | ] 57 | } 58 | ], 59 | [ 60 | 'FeaturedProduct', 61 | { 62 | ids: JSON.parse(process.env.FEATURED_PRODUCT) 63 | } 64 | ], 65 | 'LatestProduct', 66 | 'SpecialProduct', 67 | 'LatestPost' 68 | ] 69 | }, 70 | '/search/*': { 71 | contentBottom: ['SearchProduct', 'SearchPost'] 72 | }, 73 | '/store/category*': { 74 | columnLeft: [ 75 | 'StoreCategory', 76 | [ 77 | 'LatestProduct', 78 | { 79 | column: true 80 | } 81 | ] 82 | ] 83 | }, 84 | '/blog/category*': { 85 | columnRight: [ 86 | 'Search', 87 | 'BlogCategory', 88 | [ 89 | 'LatestPost', 90 | { 91 | column: true 92 | } 93 | ] 94 | ] 95 | }, 96 | '/store/product/*': { 97 | contentBottom: ['RelatedProduct'] 98 | }, 99 | '/blog/post*': { 100 | columnRight: [ 101 | [ 102 | 'LatestPost', 103 | { 104 | column: true 105 | } 106 | ] 107 | ] 108 | }, 109 | '/account*': { 110 | columnRight: ['Account'] 111 | }, 112 | '/store/checkout': { 113 | contentTop: ['Checkout'] 114 | } 115 | } 116 | } -------------------------------------------------------------------------------- /template/next/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 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 un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /template/next/assets/img/logo_footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 43 | 46 | 47 | 49 | 52 | 54 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /template/next/assets/img/logo_header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 44 | 45 | 47 | 49 | 51 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /template/next/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ -------------------------------------------------------------------------------- /template/next/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 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 Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). -------------------------------------------------------------------------------- /template/next/layouts/default.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/next/layouts/error.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/next/locales/README.md: -------------------------------------------------------------------------------- 1 | # LOCALES 2 | 3 | This directory contains your Application Languages. 4 | The locals lets you add new languages to your VueFront app. Please follow the naming format (ex. en-gb) 5 | 6 | Then add the newly created language js file to your vuefront.config.js 7 | 8 | ```js 9 | locales: { 10 | 'en-gb': ['vuefront/lib/locales/en-gb.js'], //this will load a compiled languaghe file for English 11 | 'ru-ru': ['~/locales/ru-ru'] //this will load ~/locales/ru-ru/index.js and will compile on build local Russian transaltion 12 | }, 13 | ``` 14 | 15 | More informations about the usage of this directory in the documentation: 16 | https://vuefront.com 17 | 18 | **This directory is not required, you can delete it if you don't want to use it.** 19 | -------------------------------------------------------------------------------- /template/next/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More informations about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /template/next/nuxt.config.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config(); 2 | const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); 3 | const isDev = process.env.NODE_ENV === "development"; 4 | 5 | const modules = []; 6 | 7 | if (!isDev) { 8 | modules.push("@nuxtjs/pwa"); 9 | } 10 | 11 | export default { 12 | ssr: true, 13 | target: isDev ? "server" : "static", 14 | modern: !isDev ? "client" : false, 15 | env: { 16 | FEATURED_PRODUCT: process.env.FEATURED_PRODUCT 17 | }, 18 | generate: { 19 | concurrency: 5, 20 | subFolders: false, 21 | crawler: true, 22 | }, 23 | head: { 24 | title: "vuefront", 25 | meta: [ 26 | { charset: "utf-8" }, 27 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 28 | { hid: "description", name: "description", content: "VueFront" }, 29 | ], 30 | link: [ 31 | { 32 | rel: "icon", 33 | type: "image/png", 34 | href: "/favicon.ico", 35 | } 36 | ], 37 | script: [], 38 | }, 39 | loading: { color: "#3B8070" }, 40 | modules: [ 41 | "@nuxtjs/dotenv", 42 | "vuefront-nuxt", 43 | ...modules, 44 | ], 45 | buildModules: [ 46 | // https://go.nuxtjs.dev/eslint 47 | ['@nuxtjs/eslint-module', { fix: true }], 48 | // https://go.nuxtjs.dev/stylelint 49 | '@nuxtjs/stylelint-module' 50 | // '@aceforth/nuxt-optimized-images', 51 | ], 52 | // optimizedImages: { 53 | // optimizeImages: true, 54 | // optimizeImagesInDev: true 55 | // }, 56 | build: { 57 | babel: { 58 | plugins: ["lodash", "preval", ["@babel/plugin-proposal-private-methods", { "loose": true }]], 59 | }, 60 | transpile: ["@vuefront/checkout-app"], 61 | extractCSS: !isDev, 62 | corejs: 2, 63 | optimization: { 64 | splitChunks: { 65 | chunks: "all", 66 | automaticNameDelimiter: ".", 67 | name: "test", 68 | maxSize: 256000, 69 | minSize: 50000, 70 | }, 71 | }, 72 | plugins: [ 73 | new LodashModuleReplacementPlugin({ 74 | shorthands: true, 75 | }), 76 | ], 77 | }, 78 | }; 79 | -------------------------------------------------------------------------------- /template/next/package.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apply (pkg, generator) { 3 | // edge 4 | const { theme } = generator.answers 5 | 6 | return pkg 7 | } 8 | } -------------------------------------------------------------------------------- /template/next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "nuxt dev -o", 4 | "build": "nuxt build", 5 | "start": "nuxt start", 6 | "generate": "nuxt generate", 7 | "analyze": "nuxt build --analyze", 8 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 9 | "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore", 10 | "lint": "yarn lint:js && yarn lint:style" 11 | }, 12 | "lint-staged": { 13 | "*.{js,vue}": "eslint", 14 | "*.{css,vue}": "stylelint" 15 | }, 16 | "dependencies": { 17 | "@aceforth/nuxt-optimized-images": "^1.4.0", 18 | "@nuxtjs/dotenv": "^1.4.1", 19 | "@nuxtjs/pwa": "^3.3.5", 20 | "@tailwindcss/forms": "^0.3.3", 21 | "@vuefront/checkout-app": "^0.1.22", 22 | "nuxt": "2.15.8", 23 | "nuxt-compress": "^5.0.0", 24 | "vuefront-nuxt": "vuefront/vuefront-nuxt", 25 | "vuefront": "vuefront/vuefront" 26 | }, 27 | "devDependencies": { 28 | "@commitlint/cli": "^13.1.0", 29 | "@commitlint/config-conventional": "^13.1.0", 30 | "@nuxtjs/eslint-config": "^6.0.1", 31 | "@nuxtjs/eslint-module": "^3.0.2", 32 | "@nuxtjs/stylelint-module": "^4.0.0", 33 | "babel-eslint": "^10.1.0", 34 | "babel-plugin-lodash": "^3.3.4", 35 | "babel-plugin-preval": "^5.0.0", 36 | "core-js": "2", 37 | "cz-conventional-changelog": "3.3.0", 38 | "eslint": "^7.32.0", 39 | "eslint-config-prettier": "^8.3.0", 40 | "eslint-plugin-nuxt": ">=2.0.0", 41 | "eslint-plugin-prettier": "^3.4.0", 42 | "lodash-webpack-plugin": "^0.11.6", 43 | "postcss": "^8.3.5", 44 | "prettier": "^2.3.2", 45 | "sass": "^1.32.8", 46 | "sass-loader": "^10.1.1", 47 | "stylelint": "^13.13.1", 48 | "stylelint-config-prettier": "^8.0.2", 49 | "stylelint-config-standard": "^22.0.0", 50 | "stylelint-scss": "^3.20.1" 51 | }, 52 | "config": { 53 | "commitizen": { 54 | "path": "./node_modules/cz-conventional-changelog" 55 | } 56 | }, 57 | "optionalDependencies": { 58 | "fsevents": "^2.3.2" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /template/next/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /template/next/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /template/next/static/README.md: -------------------------------------------------------------------------------- 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). 12 | -------------------------------------------------------------------------------- /template/next/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/next/static/favicon.ico -------------------------------------------------------------------------------- /template/next/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/next/static/icon.png -------------------------------------------------------------------------------- /template/next/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 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 Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /template/next/store/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/next/store/index.js -------------------------------------------------------------------------------- /template/next/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["stylelint-config-standard", "stylelint-config-prettier"], 3 | plugins: ["stylelint-scss"], 4 | // add your custom config here 5 | // https://stylelint.io/user-guide/configuration 6 | rules: { 7 | "at-rule-no-unknown": null, 8 | "scss/at-rule-no-unknown": true, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /template/next/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [ 11 | require('@tailwindcss/forms'), 12 | require('vuefront/tailwind/plugin.js') 13 | ], 14 | } -------------------------------------------------------------------------------- /template/stable/README.md: -------------------------------------------------------------------------------- 1 | # VueFront Template 2 | This is a VueFornt starter app. It has everything you need to setup a default VueFront App. 3 | 4 | More information about the usage of create VueFront App in [the documentation](https://vuefront.com/). 5 | -------------------------------------------------------------------------------- /template/stable/_.env: -------------------------------------------------------------------------------- 1 | API_URL=<%- api %> 2 | FEATURED_PRODUCT="[]" 3 | BASE_URL=/ -------------------------------------------------------------------------------- /template/stable/_.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: [ 3 | "prettier", 4 | "plugin:prettier/recommended", 5 | ], 6 | plugins: ["prettier"], 7 | rules: { 8 | }, 9 | }; 10 | -------------------------------------------------------------------------------- /template/stable/_vuefront.config.js: -------------------------------------------------------------------------------- 1 | export default {<% 2 | if (theme !== 'None') { %> 3 | theme: '@vuefront/theme-<%= theme %>',<% } %> 4 | image: { 5 | logo: { 6 | path: '~/assets/img/logo_header.svg' 7 | }, 8 | footerLogo: { 9 | path: '~/assets/img/logo_footer.svg' 10 | }, 11 | }, 12 | layouts: { 13 | '*': { 14 | headerMenu: [ 15 | [ 16 | 'Menu', 17 | { 18 | items: ['store', 'blog'] 19 | } 20 | ] 21 | ], 22 | footerLeft: ['Pages'], 23 | footerCenter: ['AccountLinks'], 24 | footerRight: [ 25 | [ 26 | 'ExtraLinks', 27 | { 28 | links: [ 29 | { 30 | to: '/store/special', 31 | text: 'Special' 32 | }, 33 | { 34 | to: '/store/compare', 35 | text: 'Compare' 36 | }, 37 | { 38 | to: '/contact', 39 | text: 'Contact Us' 40 | } 41 | ] 42 | } 43 | ] 44 | ] 45 | }, 46 | '/': { 47 | contentTop: [ 48 | [ 49 | 'Slideshow', 50 | { 51 | sliderNav: true, 52 | sliderArrows: true, 53 | items: [ 54 | 'https://img.dreamvention.com/vuefront/banners/Banner_demo_1.jpg', 55 | 'https://img.dreamvention.com/vuefront/banners/Banner_demo_2.jpg' 56 | ] 57 | } 58 | ], 59 | [ 60 | 'FeaturedProduct', 61 | { 62 | ids: JSON.parse(process.env.FEATURED_PRODUCT) 63 | } 64 | ], 65 | 'LatestProduct', 66 | 'SpecialProduct', 67 | 'LatestPost' 68 | ] 69 | }, 70 | '/search/*': { 71 | contentBottom: ['SearchProduct', 'SearchPost'] 72 | }, 73 | '/store/category*': { 74 | columnLeft: [ 75 | 'StoreCategory', 76 | [ 77 | 'LatestProduct', 78 | { 79 | column: true 80 | } 81 | ] 82 | ] 83 | }, 84 | '/blog/category*': { 85 | columnRight: [ 86 | 'Search', 87 | 'BlogCategory', 88 | [ 89 | 'LatestPost', 90 | { 91 | column: true 92 | } 93 | ] 94 | ] 95 | }, 96 | '/store/product/*': { 97 | contentBottom: ['RelatedProduct'] 98 | }, 99 | '/blog/post*': { 100 | columnRight: [ 101 | [ 102 | 'LatestPost', 103 | { 104 | column: true 105 | } 106 | ] 107 | ] 108 | }, 109 | '/account*': { 110 | columnRight: ['Account'] 111 | }, 112 | '/store/checkout': { 113 | contentTop: ['Checkout'] 114 | } 115 | } 116 | } -------------------------------------------------------------------------------- /template/stable/assets/README.md: -------------------------------------------------------------------------------- 1 | # ASSETS 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 un-compiled assets such as LESS, SASS, or JavaScript. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/assets#webpacked). 8 | -------------------------------------------------------------------------------- /template/stable/assets/img/logo_footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 43 | 46 | 47 | 49 | 52 | 54 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /template/stable/assets/img/logo_header.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 44 | 45 | 47 | 49 | 51 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /template/stable/components/README.md: -------------------------------------------------------------------------------- 1 | # COMPONENTS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | The components directory contains your Vue.js Components. 6 | 7 | _Nuxt.js doesn't supercharge these components._ -------------------------------------------------------------------------------- /template/stable/layouts/README.md: -------------------------------------------------------------------------------- 1 | # LAYOUTS 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 Application Layouts. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/views#layouts). -------------------------------------------------------------------------------- /template/stable/layouts/default.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/stable/layouts/error.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /template/stable/locales/README.md: -------------------------------------------------------------------------------- 1 | # LOCALES 2 | 3 | This directory contains your Application Languages. 4 | The locals lets you add new languages to your VueFront app. Please follow the naming format (ex. en-gb) 5 | 6 | Then add the newly created language js file to your vuefront.config.js 7 | 8 | ```js 9 | locales: { 10 | 'en-gb': ['vuefront/lib/locales/en-gb.js'], //this will load a compiled languaghe file for English 11 | 'ru-ru': ['~/locales/ru-ru'] //this will load ~/locales/ru-ru/index.js and will compile on build local Russian transaltion 12 | }, 13 | ``` 14 | 15 | More informations about the usage of this directory in the documentation: 16 | https://vuefront.com 17 | 18 | **This directory is not required, you can delete it if you don't want to use it.** 19 | -------------------------------------------------------------------------------- /template/stable/middleware/README.md: -------------------------------------------------------------------------------- 1 | # MIDDLEWARE 2 | 3 | This directory contains your Application Middleware. 4 | The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts). 5 | 6 | More informations about the usage of this directory in the documentation: 7 | https://nuxtjs.org/guide/routing#middleware 8 | 9 | **This directory is not required, you can delete it if you don't want to use it.** 10 | -------------------------------------------------------------------------------- /template/stable/nuxt.config.js: -------------------------------------------------------------------------------- 1 | require("dotenv").config(); 2 | const LodashModuleReplacementPlugin = require("lodash-webpack-plugin"); 3 | const isDev = process.env.NODE_ENV === "development"; 4 | 5 | const modules = []; 6 | 7 | if (!isDev) { 8 | modules.push("@nuxtjs/pwa"); 9 | } 10 | 11 | export default { 12 | ssr: true, 13 | target: isDev ? "server" : "static", 14 | modern: !isDev ? "client" : false, 15 | env: { 16 | FEATURED_PRODUCT: process.env.FEATURED_PRODUCT 17 | }, 18 | generate: { 19 | concurrency: 5, 20 | subFolders: false, 21 | crawler: true, 22 | }, 23 | head: { 24 | title: "vuefront", 25 | meta: [ 26 | { charset: "utf-8" }, 27 | { name: "viewport", content: "width=device-width, initial-scale=1" }, 28 | { hid: "description", name: "description", content: "VueFront" }, 29 | ], 30 | link: [ 31 | { 32 | rel: "icon", 33 | type: "image/png", 34 | href: "/favicon.ico", 35 | } 36 | ], 37 | script: [], 38 | }, 39 | loading: { color: "#3B8070" }, 40 | modules: [ 41 | "@nuxtjs/dotenv", 42 | "vuefront-nuxt", 43 | ...modules, 44 | ], 45 | buildModules: [ 46 | // https://go.nuxtjs.dev/eslint 47 | ['@nuxtjs/eslint-module', { fix: true }], 48 | // https://go.nuxtjs.dev/stylelint 49 | '@nuxtjs/stylelint-module' 50 | // '@aceforth/nuxt-optimized-images', 51 | ], 52 | // optimizedImages: { 53 | // optimizeImages: true, 54 | // optimizeImagesInDev: true 55 | // }, 56 | build: { 57 | babel: { 58 | plugins: ["lodash", "preval", ["@babel/plugin-proposal-private-methods", { "loose": true }]], 59 | }, 60 | transpile: ["@vuefront/checkout-app"], 61 | extractCSS: !isDev, 62 | corejs: 2, 63 | optimization: { 64 | splitChunks: { 65 | chunks: "all", 66 | automaticNameDelimiter: ".", 67 | name: "test", 68 | maxSize: 256000, 69 | minSize: 50000, 70 | }, 71 | }, 72 | plugins: [ 73 | new LodashModuleReplacementPlugin({ 74 | shorthands: true, 75 | }), 76 | ], 77 | }, 78 | }; 79 | -------------------------------------------------------------------------------- /template/stable/package.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apply (pkg, generator) { 3 | // edge 4 | const { theme } = generator.answers 5 | 6 | return pkg 7 | } 8 | } -------------------------------------------------------------------------------- /template/stable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "nuxt dev -o", 4 | "build": "nuxt build", 5 | "start": "nuxt start", 6 | "generate": "nuxt generate", 7 | "analyze": "nuxt build --analyze", 8 | "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .", 9 | "lint:style": "stylelint **/*.{vue,css} --ignore-path .gitignore", 10 | "lint": "yarn lint:js && yarn lint:style" 11 | }, 12 | "lint-staged": { 13 | "*.{js,vue}": "eslint", 14 | "*.{css,vue}": "stylelint" 15 | }, 16 | "dependencies": { 17 | "@aceforth/nuxt-optimized-images": "^1.4.0", 18 | "@nuxtjs/dotenv": "^1.4.1", 19 | "@nuxtjs/pwa": "^3.3.5", 20 | "@tailwindcss/forms": "^0.3.3", 21 | "@vuefront/checkout-app": "^0.2.0", 22 | "nuxt": "2.15.8", 23 | "nuxt-compress": "^5.0.0", 24 | "vuefront": "0.4.0", 25 | "vuefront-nuxt": "0.4.0" 26 | }, 27 | "devDependencies": { 28 | "@commitlint/cli": "^13.1.0", 29 | "@commitlint/config-conventional": "^13.1.0", 30 | "@nuxtjs/eslint-config": "^6.0.1", 31 | "@nuxtjs/eslint-module": "^3.0.2", 32 | "@nuxtjs/stylelint-module": "^4.0.0", 33 | "babel-eslint": "^10.1.0", 34 | "babel-plugin-lodash": "^3.3.4", 35 | "babel-plugin-preval": "^5.0.0", 36 | "core-js": "2", 37 | "cz-conventional-changelog": "3.3.0", 38 | "eslint": "^7.32.0", 39 | "eslint-config-prettier": "^8.3.0", 40 | "eslint-plugin-nuxt": ">=2.0.0", 41 | "eslint-plugin-prettier": "^3.4.0", 42 | "lodash-webpack-plugin": "^0.11.6", 43 | "postcss": "^8.3.5", 44 | "prettier": "^2.3.2", 45 | "sass": "^1.32.8", 46 | "sass-loader": "^10.1.1", 47 | "stylelint": "^13.13.1", 48 | "stylelint-config-prettier": "^8.0.2", 49 | "stylelint-config-standard": "^22.0.0", 50 | "stylelint-scss": "^3.20.1" 51 | }, 52 | "config": { 53 | "commitizen": { 54 | "path": "./node_modules/cz-conventional-changelog" 55 | } 56 | }, 57 | "optionalDependencies": { 58 | "fsevents": "^2.3.2" 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /template/stable/pages/README.md: -------------------------------------------------------------------------------- 1 | # PAGES 2 | 3 | This directory contains your Application Views and Routes. 4 | The framework reads all the `*.vue` files inside this directory and creates the router of your application. 5 | 6 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing). 7 | -------------------------------------------------------------------------------- /template/stable/plugins/README.md: -------------------------------------------------------------------------------- 1 | # PLUGINS 2 | 3 | **This directory is not required, you can delete it if you don't want to use it.** 4 | 5 | This directory contains Javascript plugins that you want to run before mounting the root Vue.js application. 6 | 7 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/plugins). 8 | -------------------------------------------------------------------------------- /template/stable/static/README.md: -------------------------------------------------------------------------------- 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). 12 | -------------------------------------------------------------------------------- /template/stable/static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/stable/static/favicon.ico -------------------------------------------------------------------------------- /template/stable/static/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/stable/static/icon.png -------------------------------------------------------------------------------- /template/stable/store/README.md: -------------------------------------------------------------------------------- 1 | # STORE 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 Vuex Store files. 6 | Vuex Store option is implemented in the Nuxt.js framework. 7 | 8 | Creating a file in this directory automatically activates the option in the framework. 9 | 10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store). 11 | -------------------------------------------------------------------------------- /template/stable/store/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/stable/store/index.js -------------------------------------------------------------------------------- /template/stable/stylelint.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | extends: ["stylelint-config-standard", "stylelint-config-prettier"], 3 | plugins: ["stylelint-scss"], 4 | // add your custom config here 5 | // https://stylelint.io/user-guide/configuration 6 | rules: { 7 | "at-rule-no-unknown": null, 8 | "scss/at-rule-no-unknown": true, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /template/stable/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | purge: [], 3 | darkMode: false, // or 'media' or 'class' 4 | theme: { 5 | extend: {}, 6 | }, 7 | variants: { 8 | extend: {}, 9 | }, 10 | plugins: [ 11 | require('@tailwindcss/forms'), 12 | require('vuefront/tailwind/plugin.js') 13 | ], 14 | } -------------------------------------------------------------------------------- /template/vite-next/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Typescript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings! 8 | 9 | ### If Using ` 13 | 14 | 15 | -------------------------------------------------------------------------------- /template/vite-next/package.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apply (pkg, generator) { 3 | // edge 4 | const { theme } = generator.answers 5 | 6 | return pkg 7 | } 8 | } -------------------------------------------------------------------------------- /template/vite-next/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "node server", 4 | "build": "yarn build:client && yarn build:server", 5 | "build:client": "vite build --ssrManifest --outDir dist/client", 6 | "build:server": "vite build --ssr src/entry-server.js --outDir dist/server", 7 | "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender", 8 | "serve": "cross-env NODE_ENV=production node server", 9 | "debug": "node --inspect-brk server" 10 | }, 11 | "dependencies": { 12 | "@types/lodash": "^4.14.178", 13 | "@urql/vue": "^0.6.1", 14 | "@vue/server-renderer": "^3.2.30", 15 | "@vuefront/checkout-app": "vuefront/checkout-app", 16 | "@vueuse/head": "^0.7.5", 17 | "autoprefixer": "^10.4.2", 18 | "dotenv": "^16.0.0", 19 | "express": "^4.17.2", 20 | "graphql": "^16.3.0", 21 | "postcss": "^8.4.6", 22 | "sass": "^1.49.7", 23 | "tailwindcss": "^3.0.18", 24 | "vite-plugin-eslint": "^1.3.0", 25 | "vite-plugin-voie": "^0.7.3", 26 | "vite-plugin-vue-vuefront": "vuefront/vite-plugin-vue-vuefront", 27 | "vite2-graphql-plugin": "^0.0.4", 28 | "vue": "^3.2.30", 29 | "vuefront": "vuefront/vuefront", 30 | "vuex": "^4.0.2" 31 | }, 32 | "devDependencies": { 33 | "@optimize-lodash/rollup-plugin": "^2.1.0", 34 | "@originjs/vite-plugin-commonjs": "^1.0.1", 35 | "@types/node": "^16.11.7", 36 | "@typescript-eslint/eslint-plugin": "^5.3.1", 37 | "@typescript-eslint/parser": "^5.3.1", 38 | "@vitejs/plugin-vue": "^1.9.4", 39 | "@vue/compiler-sfc": "^3.2.22", 40 | "compression": "^1.7.4", 41 | "cross-env": "^7.0.3", 42 | "eslint": "^8.2.0", 43 | "eslint-config-prettier": "^8.3.0", 44 | "eslint-plugin-prettier": "^4.0.0", 45 | "eslint-plugin-vue": "^8.0.3", 46 | "extract-urls": "^1.3.2", 47 | "get-urls": "^10.0.1", 48 | "prettier": "^2.4.1", 49 | "rollup-plugin-analyzer": "^4.0.0", 50 | "rollup-plugin-visualizer": "^5.5.2", 51 | "typescript": "^4.4.4", 52 | "vite": "^2.6.14", 53 | "vue-tsc": "^0.29.5" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /template/vite-next/postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | module.exports = { 3 | plugins: [ 4 | require("postcss-import"), 5 | require("tailwindcss"), 6 | require("autoprefixer"), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /template/vite-next/prerender.js: -------------------------------------------------------------------------------- 1 | // Pre-render the app into static HTML. 2 | // run `yarn generate` and then `dist/static` can be served as a static site. 3 | 4 | const fs = require("fs"); 5 | const path = require("path"); 6 | require("isomorphic-fetch"); 7 | const _ = require("lodash"); 8 | 9 | const toAbsolute = (p) => path.resolve(__dirname, p); 10 | 11 | const manifest = require("./dist/static/ssr-manifest.json"); 12 | fs.copyFileSync( 13 | toAbsolute("dist/static/index.html"), 14 | toAbsolute("dist/static/200.html") 15 | ); 16 | const template = fs.readFileSync(toAbsolute("dist/static/200.html"), "utf-8"); 17 | const { render } = require("./dist/server/entry-server.js"); 18 | const sleep = (ms) => 19 | new Promise((resolve) => { 20 | setTimeout(resolve, ms); 21 | }); 22 | // determine routes to pre-render from src/pages 23 | const routesToPrerender = fs 24 | .readdirSync(toAbsolute("src/pages")) 25 | .map((file) => { 26 | const name = file.replace(/\.vue$/, "").toLowerCase(); 27 | return name === "home" ? `/` : `/${name}`; 28 | }); 29 | 30 | routesToPrerender.push("/"); 31 | (async () => { 32 | // pre-render each route... 33 | for (const url of routesToPrerender) { 34 | const [ 35 | err, 36 | appHtml, 37 | preloadLinks, 38 | syncState, 39 | headTags, 40 | htmlAttrs, 41 | bodyAttrs, 42 | ] = await render(url, manifest, {}); 43 | const regex = /href="(\/[^"]+)"/gm; 44 | let m; 45 | 46 | while ((m = regex.exec(appHtml)) !== null) { 47 | // This is necessary to avoid infinite loops with zero-width matches 48 | if (m.index === regex.lastIndex) { 49 | regex.lastIndex++; 50 | } 51 | 52 | if (m.length > 1) { 53 | if (!_.includes(routesToPrerender, m[1])) { 54 | routesToPrerender.push(m[1]); 55 | } 56 | } 57 | } 58 | const html = template 59 | .replace("data-html-attrs", htmlAttrs) 60 | .replace("", headTags) 61 | .replace("data-body-attrs", bodyAttrs) 62 | .replace("", preloadLinks) 63 | .replace("", appHtml) 64 | .replace( 65 | "/*sync-state-outlet*/", 66 | `window.__syncState__ = ${JSON.stringify(syncState)}` 67 | ); 68 | 69 | const filePath = `dist/static${url === "/" ? "/index" : url}.html`; 70 | fs.mkdirSync(path.dirname(toAbsolute(filePath)), { recursive: true }); 71 | 72 | fs.writeFileSync(toAbsolute(filePath), html); 73 | console.log("pre-rendered:", filePath); 74 | await sleep(400); 75 | } 76 | 77 | // done, delete ssr manifest 78 | fs.unlinkSync(toAbsolute("dist/static/ssr-manifest.json")); 79 | })(); 80 | -------------------------------------------------------------------------------- /template/vite-next/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/vite-next/public/favicon.ico -------------------------------------------------------------------------------- /template/vite-next/server.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | const express = require("express"); 5 | 6 | const isTest = process.env.NODE_ENV === "test" || !!process.env.VITE_TEST_BUILD; 7 | const port = process.env.PORT || 3000; 8 | async function createServer( 9 | root = process.cwd(), 10 | isProd = process.env.NODE_ENV === "production" 11 | ) { 12 | const resolve = (p) => path.resolve(__dirname, p); 13 | 14 | const indexProd = isProd 15 | ? fs.readFileSync(resolve("dist/client/index.html"), "utf-8") 16 | : ""; 17 | 18 | const manifest = isProd 19 | ? // @ts-ignore 20 | require("./dist/client/ssr-manifest.json") 21 | : {}; 22 | 23 | const app = express(); 24 | 25 | /** 26 | * @type {import('vite').ViteDevServer} 27 | */ 28 | let vite; 29 | if (!isProd) { 30 | vite = await require("vite").createServer({ 31 | root, 32 | logLevel: isTest ? "error" : "info", 33 | server: { 34 | middlewareMode: "ssr", 35 | watch: { 36 | // During tests we edit the files too fast and sometimes chokidar 37 | // misses change events, so enforce polling for consistency 38 | usePolling: true, 39 | interval: 100, 40 | }, 41 | }, 42 | }); 43 | // use vite's connect instance as middleware 44 | app.use(vite.middlewares); 45 | } else { 46 | app.use(require("compression")()); 47 | app.use( 48 | require("serve-static")(resolve("dist/client"), { 49 | index: false, 50 | }) 51 | ); 52 | } 53 | 54 | app.use("*", async (req, res) => { 55 | const context = { 56 | host: `${req.protocol}://${req.headers.host}`, 57 | ua: req.headers["user-agent"], 58 | }; 59 | try { 60 | const url = req.originalUrl; 61 | 62 | let template, render; 63 | if (!isProd) { 64 | template = fs.readFileSync(resolve("index.html"), "utf-8"); 65 | template = await vite.transformIndexHtml(url, template); 66 | render = (await vite.ssrLoadModule("/src/entry-server.js")).render; 67 | } else { 68 | template = indexProd; 69 | render = require("./dist/server/entry-server.js").render; 70 | } 71 | const [ 72 | err, 73 | appHtml, 74 | preloadLinks, 75 | syncState, 76 | headTags, 77 | htmlAttrs, 78 | bodyAttrs, 79 | ] = await render(url, manifest, context); 80 | 81 | const html = template 82 | .replace("data-html-attrs", htmlAttrs) 83 | .replace("", headTags) 84 | .replace("data-body-attrs", bodyAttrs) 85 | .replace("", preloadLinks) 86 | .replace("", appHtml) 87 | .replace( 88 | "/*sync-state-outlet*/", 89 | `window.__syncState__ = ${JSON.stringify(syncState)}` 90 | ); 91 | 92 | let statusCode = 200; 93 | if (err) { 94 | console.log(err); 95 | statusCode = err.message.indexOf("404") === 0 ? 404 : 202; // 渲染错误用202不被缓存 96 | } 97 | res.status(statusCode).set({ "Content-Type": "text/html" }).end(html); 98 | } catch (e) { 99 | vite && vite.ssrFixStacktrace(e); 100 | console.log(e.stack); 101 | res.status(500).end(e.stack); 102 | } 103 | }); 104 | 105 | return { app, vite }; 106 | } 107 | 108 | if (!isTest) { 109 | createServer().then(({ app }) => 110 | app.listen(port, () => { 111 | console.log("http://localhost:" + port); 112 | }) 113 | ); 114 | } 115 | 116 | // for test use 117 | exports.createServer = createServer; 118 | -------------------------------------------------------------------------------- /template/vite-next/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /template/vite-next/src/assets/img/VUE_JS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 44 | 45 | 47 | 49 | 51 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /template/vite-next/src/assets/img/VUE_JS_Footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 43 | 46 | 47 | 49 | 52 | 54 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /template/vite-next/src/entry-client.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "./main"; 2 | 3 | createApp().then(({ app }) => { 4 | app.mount("#app"); 5 | }); 6 | -------------------------------------------------------------------------------- /template/vite-next/src/entry-server.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "./main"; 2 | import { renderToString } from "@vue/server-renderer"; 3 | async function renderMetaToString(app, ctx = {}) { 4 | if (!ctx.teleports || !ctx.teleports.head) { 5 | const teleports = app.config.globalProperties.$metaManager?.render(); 6 | await Promise.all( 7 | teleports.map((teleport) => renderToString(teleport, ctx)) 8 | ); 9 | } 10 | const { teleports } = ctx; 11 | for (const target in teleports) { 12 | if (target.endsWith("Attrs")) { 13 | const str = teleports[target]; 14 | 15 | teleports[target] = str.slice(str.indexOf(" ") + 1, str.indexOf(">")); 16 | } 17 | } 18 | return ctx; 19 | } 20 | export async function render(url, manifest, context = { host: "", ua: "" }) { 21 | let renderError = null; 22 | const sessionContext = { 23 | host: context.host, 24 | token: "", 25 | UUID: "", 26 | ua: context.ua, 27 | resetToken: (token) => {}, 28 | }; 29 | const syncState = {}; 30 | 31 | const { app, router } = await createApp(sessionContext, syncState); 32 | 33 | router.push(url); 34 | try { 35 | await router.isReady(); 36 | } catch (e) { 37 | renderError = e; 38 | } 39 | 40 | const matchedComponents = router.currentRoute.value.matched; 41 | 42 | if (matchedComponents.some((m) => m.name === "404")) { 43 | renderError = new Error(`404: ${url}`); 44 | } 45 | 46 | const ctx = {}; 47 | let html = ""; 48 | try { 49 | html = await renderToString(app, ctx); 50 | } catch (e) { 51 | renderError = e; 52 | } 53 | const preloadLinks = renderPreloadLinks(ctx.modules, manifest); 54 | 55 | await renderMetaToString(app, ctx); 56 | 57 | const htmlAttrs = ctx.teleports ? ctx.teleports.htmlAttrs || "" : ""; 58 | const bodyAttrs = ctx.teleports ? ctx.teleports.bodyAttrs || "" : ""; 59 | const head = ctx.teleports ? ctx.teleports.head || "" : ""; 60 | 61 | return [ 62 | renderError, 63 | html, 64 | preloadLinks, 65 | syncState, 66 | head, 67 | htmlAttrs || "", 68 | bodyAttrs || "", 69 | ]; 70 | } 71 | 72 | function renderPreloadLinks(modules, manifest) { 73 | let links = ""; 74 | const seen = new Set(); 75 | modules.forEach((id) => { 76 | const files = manifest[id]; 77 | if (files) { 78 | files.forEach((file) => { 79 | if (!seen.has(file)) { 80 | seen.add(file); 81 | links += renderPreloadLink(file); 82 | } 83 | }); 84 | } 85 | }); 86 | return links; 87 | } 88 | 89 | function renderPreloadLink(file) { 90 | if (file.endsWith(".js")) { 91 | return ``; 92 | } else if (file.endsWith(".css")) { 93 | return ``; 94 | } else if (file.endsWith(".woff")) { 95 | return ` `; 96 | } else if (file.endsWith(".woff2")) { 97 | return ` `; 98 | } else if (file.endsWith(".gif")) { 99 | return ` `; 100 | } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) { 101 | return ` `; 102 | } else if (file.endsWith(".png")) { 103 | return ` `; 104 | } else { 105 | // TODO 106 | return ""; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /template/vite-next/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } -------------------------------------------------------------------------------- /template/vite-next/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.vue"; 2 | import { createVueFrontApp } from "@vuefront-create-app"; 3 | 4 | export const createApp = async () => { 5 | const m = await createVueFrontApp(App); 6 | return m; 7 | }; 8 | -------------------------------------------------------------------------------- /template/vite-next/src/pages/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/vite-next/src/pages/README.md -------------------------------------------------------------------------------- /template/vite-next/src/pages/component.vue: -------------------------------------------------------------------------------- 1 | 328 | 378 | -------------------------------------------------------------------------------- /template/vite-next/src/pages/molecules.vue: -------------------------------------------------------------------------------- 1 | 163 | 262 | -------------------------------------------------------------------------------- /template/vite-next/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /template/vite-next/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./src/components/**/*.vue", 4 | "./node_modules/vuefront/lib/**/*.vue", 5 | "./node_modules/@vuefront/checkout-app/**/*.vue", 6 | ], 7 | safelist: [ 8 | { 9 | variants: ["md", "sm", "lg"], 10 | pattern: /^vf-/, 11 | }, 12 | ], 13 | // theme: { 14 | // extend: { 15 | // vuefront: { 16 | // colors: { 17 | // primary: 'red' 18 | // } 19 | // } 20 | // } 21 | // }, 22 | plugins: [ 23 | require("@tailwindcss/forms"), 24 | require("@tailwindcss/line-clamp"), 25 | require("vuefront/tailwind/plugin.js"), 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /template/vite-next/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "allowJs": true, 10 | "sourceMap": true, 11 | "resolveJsonModule": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"] 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 16 | } -------------------------------------------------------------------------------- /template/vite-next/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import eslintPlugin from "vite-plugin-eslint"; 4 | import vuefrontPlugin from "vite-plugin-vue-vuefront"; 5 | import voie from "vite-plugin-voie"; 6 | import viteGraphlQl from "vite2-graphql-plugin"; 7 | import path from "path"; 8 | import { visualizer } from "rollup-plugin-visualizer"; 9 | import { optimizeLodashImports } from "@optimize-lodash/rollup-plugin"; 10 | 11 | export const ssrTransformCustomDir = () => { 12 | return { 13 | props: [], 14 | needRuntime: true, 15 | }; 16 | }; 17 | // https://vitejs.dev/config/ 18 | export default defineConfig(({ mode }) => { 19 | const plugins = []; 20 | if (mode === "production") { 21 | plugins.push(optimizeLodashImports()); 22 | plugins.push(visualizer()); 23 | } 24 | return { 25 | optimizeDeps: { 26 | include: ["lodash"], 27 | }, 28 | resolve: { 29 | alias: { 30 | "~": path.resolve(__dirname, "./src"), 31 | }, 32 | }, 33 | plugins: [ 34 | vue({ 35 | template: { 36 | ssr: true, 37 | compilerOptions: { 38 | directiveTransforms: { 39 | lazy: ssrTransformCustomDir, 40 | }, 41 | }, 42 | }, 43 | }), 44 | viteGraphlQl(), 45 | voie(), 46 | eslintPlugin({ 47 | fix: true, 48 | }), 49 | vuefrontPlugin(), 50 | ...plugins, 51 | ], 52 | }; 53 | }); 54 | -------------------------------------------------------------------------------- /template/vite-stable/README.md: -------------------------------------------------------------------------------- 1 | # Vue 3 + Typescript + Vite 2 | 3 | This template should help get you started developing with Vue 3 and Typescript in Vite. 4 | 5 | ## Recommended IDE Setup 6 | 7 | [VSCode](https://code.visualstudio.com/) + [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur). Make sure to enable `vetur.experimental.templateInterpolationService` in settings! 8 | 9 | ### If Using ` 13 | 14 | 15 | -------------------------------------------------------------------------------- /template/vite-stable/package.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | apply (pkg, generator) { 3 | // edge 4 | const { theme } = generator.answers 5 | 6 | return pkg 7 | } 8 | } -------------------------------------------------------------------------------- /template/vite-stable/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "scripts": { 3 | "dev": "node server", 4 | "build": "yarn build:client && yarn build:server", 5 | "build:client": "vite build --ssrManifest --outDir dist/client", 6 | "build:server": "vite build --ssr src/entry-server.js --outDir dist/server", 7 | "generate": "vite build --ssrManifest --outDir dist/static && yarn build:server && node prerender", 8 | "serve": "cross-env NODE_ENV=production node server", 9 | "debug": "node --inspect-brk server" 10 | }, 11 | "dependencies": { 12 | "@types/lodash": "^4.14.178", 13 | "@urql/vue": "^0.6.1", 14 | "@vue/server-renderer": "^3.2.30", 15 | "@vuefront/checkout-app": "^0.3.1", 16 | "@vueuse/head": "^0.7.5", 17 | "autoprefixer": "^10.4.2", 18 | "dotenv": "^16.0.0", 19 | "express": "^4.17.2", 20 | "graphql": "^16.3.0", 21 | "postcss": "^8.4.6", 22 | "sass": "^1.49.7", 23 | "tailwindcss": "^3.0.18", 24 | "vite-plugin-eslint": "^1.3.0", 25 | "vite-plugin-voie": "^0.7.3", 26 | "vite-plugin-vue-vuefront": "^0.1.8", 27 | "vite2-graphql-plugin": "^0.0.4", 28 | "vue": "^3.2.30", 29 | "vuefront": "^0.5.9", 30 | "vuex": "^4.0.2" 31 | }, 32 | "devDependencies": { 33 | "@optimize-lodash/rollup-plugin": "^3.0.0", 34 | "@originjs/vite-plugin-commonjs": "^1.0.2", 35 | "@types/node": "^17.0.15", 36 | "@typescript-eslint/eslint-plugin": "^5.10.2", 37 | "@typescript-eslint/parser": "^5.10.2", 38 | "@vitejs/plugin-vue": "^2.1.0", 39 | "compression": "^1.7.4", 40 | "cross-env": "^7.0.3", 41 | "eslint": "^8.8.0", 42 | "eslint-config-prettier": "^8.3.0", 43 | "eslint-plugin-prettier": "^4.0.0", 44 | "eslint-plugin-vue": "^8.4.1", 45 | "extract-urls": "^1.3.2", 46 | "get-urls": "^11.0.0", 47 | "postcss-import": "^14.0.2", 48 | "prettier": "^2.5.1", 49 | "rollup-plugin-analyzer": "^4.0.0", 50 | "rollup-plugin-visualizer": "^5.5.4", 51 | "typescript": "^4.5.5", 52 | "vite": "^2.7.13", 53 | "vue-tsc": "^0.31.2" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /template/vite-stable/postcss.config.js: -------------------------------------------------------------------------------- 1 | // postcss.config.js 2 | module.exports = { 3 | plugins: [ 4 | require("postcss-import"), 5 | require("tailwindcss"), 6 | require("autoprefixer"), 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /template/vite-stable/prerender.js: -------------------------------------------------------------------------------- 1 | // Pre-render the app into static HTML. 2 | // run `yarn generate` and then `dist/static` can be served as a static site. 3 | 4 | const fs = require("fs"); 5 | const path = require("path"); 6 | require("isomorphic-fetch"); 7 | const _ = require("lodash"); 8 | 9 | const toAbsolute = (p) => path.resolve(__dirname, p); 10 | 11 | const manifest = require("./dist/static/ssr-manifest.json"); 12 | fs.copyFileSync( 13 | toAbsolute("dist/static/index.html"), 14 | toAbsolute("dist/static/200.html") 15 | ); 16 | const template = fs.readFileSync(toAbsolute("dist/static/200.html"), "utf-8"); 17 | const { render } = require("./dist/server/entry-server.js"); 18 | const sleep = (ms) => 19 | new Promise((resolve) => { 20 | setTimeout(resolve, ms); 21 | }); 22 | // determine routes to pre-render from src/pages 23 | const routesToPrerender = fs 24 | .readdirSync(toAbsolute("src/pages")) 25 | .map((file) => { 26 | const name = file.replace(/\.vue$/, "").toLowerCase(); 27 | return name === "home" ? `/` : `/${name}`; 28 | }); 29 | 30 | routesToPrerender.push("/"); 31 | (async () => { 32 | // pre-render each route... 33 | for (const url of routesToPrerender) { 34 | const [ 35 | err, 36 | appHtml, 37 | preloadLinks, 38 | syncState, 39 | headTags, 40 | htmlAttrs, 41 | bodyAttrs, 42 | ] = await render(url, manifest, {}); 43 | const regex = /href="(\/[^"]+)"/gm; 44 | let m; 45 | 46 | while ((m = regex.exec(appHtml)) !== null) { 47 | // This is necessary to avoid infinite loops with zero-width matches 48 | if (m.index === regex.lastIndex) { 49 | regex.lastIndex++; 50 | } 51 | 52 | if (m.length > 1) { 53 | if (!_.includes(routesToPrerender, m[1])) { 54 | routesToPrerender.push(m[1]); 55 | } 56 | } 57 | } 58 | const html = template 59 | .replace("data-html-attrs", htmlAttrs) 60 | .replace("", headTags) 61 | .replace("data-body-attrs", bodyAttrs) 62 | .replace("", preloadLinks) 63 | .replace("", appHtml) 64 | .replace( 65 | "/*sync-state-outlet*/", 66 | `window.__syncState__ = ${JSON.stringify(syncState)}` 67 | ); 68 | 69 | const filePath = `dist/static${url === "/" ? "/index" : url}.html`; 70 | fs.mkdirSync(path.dirname(toAbsolute(filePath)), { recursive: true }); 71 | 72 | fs.writeFileSync(toAbsolute(filePath), html); 73 | console.log("pre-rendered:", filePath); 74 | await sleep(400); 75 | } 76 | 77 | // done, delete ssr manifest 78 | fs.unlinkSync(toAbsolute("dist/static/ssr-manifest.json")); 79 | })(); 80 | -------------------------------------------------------------------------------- /template/vite-stable/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/vite-stable/public/favicon.ico -------------------------------------------------------------------------------- /template/vite-stable/server.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | const fs = require("fs"); 3 | const path = require("path"); 4 | const express = require("express"); 5 | 6 | const isTest = process.env.NODE_ENV === "test" || !!process.env.VITE_TEST_BUILD; 7 | const port = process.env.PORT || 3000; 8 | async function createServer( 9 | root = process.cwd(), 10 | isProd = process.env.NODE_ENV === "production" 11 | ) { 12 | const resolve = (p) => path.resolve(__dirname, p); 13 | 14 | const indexProd = isProd 15 | ? fs.readFileSync(resolve("dist/client/index.html"), "utf-8") 16 | : ""; 17 | 18 | const manifest = isProd 19 | ? // @ts-ignore 20 | require("./dist/client/ssr-manifest.json") 21 | : {}; 22 | 23 | const app = express(); 24 | 25 | /** 26 | * @type {import('vite').ViteDevServer} 27 | */ 28 | let vite; 29 | if (!isProd) { 30 | vite = await require("vite").createServer({ 31 | root, 32 | logLevel: isTest ? "error" : "info", 33 | server: { 34 | middlewareMode: "ssr", 35 | watch: { 36 | // During tests we edit the files too fast and sometimes chokidar 37 | // misses change events, so enforce polling for consistency 38 | usePolling: true, 39 | interval: 100, 40 | }, 41 | }, 42 | }); 43 | // use vite's connect instance as middleware 44 | app.use(vite.middlewares); 45 | } else { 46 | app.use(require("compression")()); 47 | app.use( 48 | require("serve-static")(resolve("dist/client"), { 49 | index: false, 50 | }) 51 | ); 52 | } 53 | 54 | app.use("*", async (req, res) => { 55 | const context = { 56 | host: `${req.protocol}://${req.headers.host}`, 57 | ua: req.headers["user-agent"], 58 | }; 59 | try { 60 | const url = req.originalUrl; 61 | 62 | let template, render; 63 | if (!isProd) { 64 | template = fs.readFileSync(resolve("index.html"), "utf-8"); 65 | template = await vite.transformIndexHtml(url, template); 66 | render = (await vite.ssrLoadModule("/src/entry-server.js")).render; 67 | } else { 68 | template = indexProd; 69 | render = require("./dist/server/entry-server.js").render; 70 | } 71 | const [ 72 | err, 73 | appHtml, 74 | preloadLinks, 75 | syncState, 76 | headTags, 77 | htmlAttrs, 78 | bodyAttrs, 79 | ] = await render(url, manifest, context); 80 | 81 | const html = template 82 | .replace("data-html-attrs", htmlAttrs) 83 | .replace("", headTags) 84 | .replace("data-body-attrs", bodyAttrs) 85 | .replace("", preloadLinks) 86 | .replace("", appHtml) 87 | .replace( 88 | "/*sync-state-outlet*/", 89 | `window.__syncState__ = ${JSON.stringify(syncState)}` 90 | ); 91 | 92 | let statusCode = 200; 93 | if (err) { 94 | console.log(err); 95 | statusCode = err.message.indexOf("404") === 0 ? 404 : 202; // 渲染错误用202不被缓存 96 | } 97 | res.status(statusCode).set({ "Content-Type": "text/html" }).end(html); 98 | } catch (e) { 99 | vite && vite.ssrFixStacktrace(e); 100 | console.log(e.stack); 101 | res.status(500).end(e.stack); 102 | } 103 | }); 104 | 105 | return { app, vite }; 106 | } 107 | 108 | if (!isTest) { 109 | createServer().then(({ app }) => 110 | app.listen(port, () => { 111 | console.log("http://localhost:" + port); 112 | }) 113 | ); 114 | } 115 | 116 | // for test use 117 | exports.createServer = createServer; 118 | -------------------------------------------------------------------------------- /template/vite-stable/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /template/vite-stable/src/assets/img/VUE_JS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 44 | 45 | 47 | 49 | 51 | 53 | 54 | 55 | 56 | -------------------------------------------------------------------------------- /template/vite-stable/src/assets/img/VUE_JS_Footer.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 41 | 43 | 46 | 47 | 49 | 52 | 54 | 56 | 57 | 58 | 59 | -------------------------------------------------------------------------------- /template/vite-stable/src/entry-client.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "./main"; 2 | 3 | createApp().then(({ app }) => { 4 | app.mount("#app"); 5 | }); 6 | -------------------------------------------------------------------------------- /template/vite-stable/src/entry-server.js: -------------------------------------------------------------------------------- 1 | import { createApp } from "./main"; 2 | import { renderToString } from "@vue/server-renderer"; 3 | async function renderMetaToString(app, ctx = {}) { 4 | if (!ctx.teleports || !ctx.teleports.head) { 5 | const teleports = app.config.globalProperties.$metaManager?.render(); 6 | await Promise.all( 7 | teleports.map((teleport) => renderToString(teleport, ctx)) 8 | ); 9 | } 10 | const { teleports } = ctx; 11 | for (const target in teleports) { 12 | if (target.endsWith("Attrs")) { 13 | const str = teleports[target]; 14 | 15 | teleports[target] = str.slice(str.indexOf(" ") + 1, str.indexOf(">")); 16 | } 17 | } 18 | return ctx; 19 | } 20 | export async function render(url, manifest, context = { host: "", ua: "" }) { 21 | let renderError = null; 22 | const sessionContext = { 23 | host: context.host, 24 | token: "", 25 | UUID: "", 26 | ua: context.ua, 27 | resetToken: (token) => {}, 28 | }; 29 | const syncState = {}; 30 | 31 | const { app, router } = await createApp(sessionContext, syncState); 32 | 33 | router.push(url); 34 | try { 35 | await router.isReady(); 36 | } catch (e) { 37 | renderError = e; 38 | } 39 | 40 | const matchedComponents = router.currentRoute.value.matched; 41 | 42 | if (matchedComponents.some((m) => m.name === "404")) { 43 | renderError = new Error(`404: ${url}`); 44 | } 45 | 46 | const ctx = {}; 47 | let html = ""; 48 | try { 49 | html = await renderToString(app, ctx); 50 | } catch (e) { 51 | renderError = e; 52 | } 53 | const preloadLinks = renderPreloadLinks(ctx.modules, manifest); 54 | 55 | await renderMetaToString(app, ctx); 56 | 57 | const htmlAttrs = ctx.teleports ? ctx.teleports.htmlAttrs || "" : ""; 58 | const bodyAttrs = ctx.teleports ? ctx.teleports.bodyAttrs || "" : ""; 59 | const head = ctx.teleports ? ctx.teleports.head || "" : ""; 60 | 61 | return [ 62 | renderError, 63 | html, 64 | preloadLinks, 65 | syncState, 66 | head, 67 | htmlAttrs || "", 68 | bodyAttrs || "", 69 | ]; 70 | } 71 | 72 | function renderPreloadLinks(modules, manifest) { 73 | let links = ""; 74 | const seen = new Set(); 75 | modules.forEach((id) => { 76 | const files = manifest[id]; 77 | if (files) { 78 | files.forEach((file) => { 79 | if (!seen.has(file)) { 80 | seen.add(file); 81 | links += renderPreloadLink(file); 82 | } 83 | }); 84 | } 85 | }); 86 | return links; 87 | } 88 | 89 | function renderPreloadLink(file) { 90 | if (file.endsWith(".js")) { 91 | return ``; 92 | } else if (file.endsWith(".css")) { 93 | return ``; 94 | } else if (file.endsWith(".woff")) { 95 | return ` `; 96 | } else if (file.endsWith(".woff2")) { 97 | return ` `; 98 | } else if (file.endsWith(".gif")) { 99 | return ` `; 100 | } else if (file.endsWith(".jpg") || file.endsWith(".jpeg")) { 101 | return ` `; 102 | } else if (file.endsWith(".png")) { 103 | return ` `; 104 | } else { 105 | // TODO 106 | return ""; 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /template/vite-stable/src/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | 3 | declare module '*.vue' { 4 | import { DefineComponent } from 'vue' 5 | // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types 6 | const component: DefineComponent<{}, {}, any> 7 | export default component 8 | } -------------------------------------------------------------------------------- /template/vite-stable/src/main.js: -------------------------------------------------------------------------------- 1 | import App from "./App.vue"; 2 | import { createVueFrontApp } from "@vuefront-create-app"; 3 | 4 | export const createApp = async () => { 5 | const m = await createVueFrontApp(App); 6 | return m; 7 | }; 8 | -------------------------------------------------------------------------------- /template/vite-stable/src/pages/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vuefront/create-vuefront-app/6bbb48f3bcb1eaace663bbb12a4570edb95aaba7/template/vite-stable/src/pages/README.md -------------------------------------------------------------------------------- /template/vite-stable/src/pages/component.vue: -------------------------------------------------------------------------------- 1 | 328 | 378 | -------------------------------------------------------------------------------- /template/vite-stable/src/pages/molecules.vue: -------------------------------------------------------------------------------- 1 | 163 | 262 | -------------------------------------------------------------------------------- /template/vite-stable/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /template/vite-stable/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./src/components/**/*.vue", 4 | "./node_modules/vuefront/lib/**/*.vue", 5 | "./node_modules/@vuefront/checkout-app/**/*.vue", 6 | ], 7 | safelist: [ 8 | { 9 | variants: ["md", "sm", "lg"], 10 | pattern: /^vf-/, 11 | }, 12 | ], 13 | // theme: { 14 | // extend: { 15 | // vuefront: { 16 | // colors: { 17 | // primary: 'red' 18 | // } 19 | // } 20 | // } 21 | // }, 22 | plugins: [ 23 | require("@tailwindcss/forms"), 24 | require("@tailwindcss/line-clamp"), 25 | require("vuefront/tailwind/plugin.js"), 26 | ], 27 | }; 28 | -------------------------------------------------------------------------------- /template/vite-stable/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "esnext", 4 | "useDefineForClassFields": true, 5 | "module": "esnext", 6 | "moduleResolution": "node", 7 | "strict": true, 8 | "jsx": "preserve", 9 | "allowJs": true, 10 | "sourceMap": true, 11 | "resolveJsonModule": true, 12 | "esModuleInterop": true, 13 | "lib": ["esnext", "dom"] 14 | }, 15 | "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"] 16 | } -------------------------------------------------------------------------------- /template/vite-stable/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import vue from "@vitejs/plugin-vue"; 3 | import eslintPlugin from "vite-plugin-eslint"; 4 | import vuefrontPlugin from "vite-plugin-vue-vuefront"; 5 | import voie from "vite-plugin-voie"; 6 | import viteGraphlQl from "vite2-graphql-plugin"; 7 | import path from "path"; 8 | import { visualizer } from "rollup-plugin-visualizer"; 9 | import { optimizeLodashImports } from "@optimize-lodash/rollup-plugin"; 10 | 11 | export const ssrTransformCustomDir = () => { 12 | return { 13 | props: [], 14 | needRuntime: true, 15 | }; 16 | }; 17 | // https://vitejs.dev/config/ 18 | export default defineConfig(({ mode }) => { 19 | const plugins = []; 20 | if (mode === "production") { 21 | plugins.push(optimizeLodashImports()); 22 | plugins.push(visualizer()); 23 | } 24 | return { 25 | optimizeDeps: { 26 | include: ["lodash"], 27 | }, 28 | resolve: { 29 | alias: { 30 | "~": path.resolve(__dirname, "./src"), 31 | }, 32 | }, 33 | plugins: [ 34 | vue({ 35 | template: { 36 | ssr: true, 37 | compilerOptions: { 38 | directiveTransforms: { 39 | lazy: ssrTransformCustomDir, 40 | }, 41 | }, 42 | }, 43 | }), 44 | viteGraphlQl(), 45 | voie(), 46 | eslintPlugin({ 47 | fix: true, 48 | }), 49 | vuefrontPlugin(), 50 | ...plugins, 51 | ], 52 | }; 53 | }); 54 | --------------------------------------------------------------------------------