{"id":15295042,"url":"https://github.com/cj/vues","last_synced_at":"2025-04-13T15:57:19.843Z","repository":{"id":57396901,"uuid":"76096252","full_name":"cj/vues","owner":"cj","description":"The quickest way to run vuejs client or server side (inspired by next.js and nuxt.js).","archived":false,"fork":false,"pushed_at":"2017-03-16T23:28:05.000Z","size":152,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T15:58:07.604Z","etag":null,"topics":["build","client","vue","vuejs","vuejs2","vues","vuex","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-10T06:57:50.000Z","updated_at":"2024-09-19T01:12:16.000Z","dependencies_parsed_at":"2022-09-19T20:46:49.739Z","dependency_job_id":null,"html_url":"https://github.com/cj/vues","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cj%2Fvues","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cj%2Fvues/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cj%2Fvues/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cj%2Fvues/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cj","download_url":"https://codeload.github.com/cj/vues/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248741159,"owners_count":21154252,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["build","client","vue","vuejs","vuejs2","vues","vuex","webpack"],"created_at":"2024-09-30T17:08:23.802Z","updated_at":"2025-04-13T15:57:19.824Z","avatar_url":"https://github.com/cj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eVues \u003cimg src='https://raw.githubusercontent.com/xpepermint/vue-webpack/master/logo.png' height='20px' /\u003e\u003c/h1\u003e\n\n\u003cp style='color: #A61717;' align=\"center\"\u003e🚧 \u003ci\u003e\u003cb\u003eUnder active development.  Feedback is welcome.\u003c/b\u003e\u003c/i\u003e 🚧\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.org/cj/vues\"\u003e\u003cimg src=\"https://img.shields.io/travis/cj/vues/master.svg\" alt=\"Build Status\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/cj/vues?branch=master\"\u003e\u003cimg src=\"https://img.shields.io/coveralls/cj/vues/master.svg\" alt=\"Coverage Status\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vues\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/vues.svg\" alt=\"Downloads\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://gitter.im/cj/vues\"\u003e\u003cimg src=\"https://img.shields.io/badge/GITTER-join%20chat-green.svg\" alt=\"Gitter\" target=\"_blank\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/cj/vues/blob/master/LICENSE.md\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/vues.svg\" alt=\"License\" target=\"_blank\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003e The quickest way to run [vuejs] client side (inspired by [next.js], [nuxt.js] and  [vbuild]).\n\n## Introduction\n\n## Quickstart\n\n```\n$ yarn global add vues\n$ vues init project\n$ cd project\n$ yarn dev\n```\nDone!!!  You're now running [vuejs].\n\n## Folder Structure\n\n```javascript\nprojectDir/\n|\n|-- filters/\n|\n|-- layouts/\n|\n|-- stores/\n|\n|-- views/\n```\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#folder__filters'\u003e\u003cb\u003efilters\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eGlobal \u003ca href='https://vuejs.org/'\u003evuejs\u003c/a\u003e filters.\u003c/p\u003e\n\u003c/summary\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#folder__layouts'\u003e\u003cb\u003elayouts\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eWrap your views with layout.\u003c/p\u003e\n\u003c/summary\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#folder__stores'\u003e\u003cb\u003estores\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eVuex namespaced stores.\u003c/p\u003e\n\u003c/summary\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#folder__views'\u003e\u003cb\u003eviews\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eApplication views.\u003c/p\u003e\n\u003c/summary\u003e\n\u003c/details\u003e\n\n## vues.config.js (click to toggle)\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__title'\u003e\u003cb\u003etitle\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eSet the title for your application.\u003c/p\u003e\n\u003c/summary\u003e\n\n```javascript\n{\n  title: 'My App'\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__title-template'\u003e\u003cb\u003etitleTemplate\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eSets the title dynamically based on the title option in your /views vue component.\u003c/p\u003e\n\u003c/summary\u003e\n\n`{{ title }}` will be replaced by the title in your `vues.config.js` and `{{ viewTitle }}` will be replaced by the `title` option in your `/views` `.vue` file.\n\n```javascript\n{\n  titleTemplate: '{{ title }} | {{ viewTitle }}'\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config_src-dir'\u003e\u003cb\u003esrcDir\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eSpecify the vues root folder.  This is the project root by default.\u003c/p\u003e\n\u003c/summary\u003e\n\n```javascript\nimport { resolve } from 'path'\n\n{\n  srcDir: resolve('./src')\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__include'\u003e\u003cb\u003einclude\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eFiles/folders to be compiled with babel-loader.\u003c/p\u003e\n\u003c/summary\u003e\n\nSome node modules may require the need to be processed by `babel-loader`.\n\n```javascript\n{\n  include: ['some-node-module']\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__envs'\u003e\u003cb\u003eenvs\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eCompile selected process.env variables with webpack.\u003c/p\u003e\n\u003c/summary\u003e\n\nVues will load environment variables from `.env` and `.env.[process.env.NODE_ENV]` files.  If you want access to them via `process.env` inside your [vuejs] project just and them to your envs array.\n\n```javascript\n{\n  envs: ['PUBLIC_KEY']\n}\n```\n\nYou will now have access to `process.env.PUBLIC_KEY` inside your [vuejs] project.\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__router'\u003e\u003cb\u003erouter\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eCustomize the vue-router.\u003c/p\u003e\n\u003c/summary\u003e\n\nYou can completely customize [vue-router] using any of the options available at https://router.vuejs.org/en/.  If you make the router option a function, you will be able to access the context of the router file.\n\n```javascript\n{\n  router () {\n    return {\n      history: null, // cordova can't handle html5 browser history\n      routes: [\n        { name: 'index', path: '/', component: require('~/views/login') },\n        // You have access to LoginView due to this being executed in the context of the router file.\n        { name: 'logout', path: '/logout', component: LoginView }\n      ],\n      // You even have the option to use the routers beforeEach method.\n      beforeEach (to, from, next) {\n        // some code\n      }\n    }\n  }\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__store'\u003e\u003cb\u003estore\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eCustomize the vuex store.\u003c/p\u003e\n\u003c/summary\u003e\n\nJust like the [router] you can use this to completely customize [vuex].  It may also be turned into a function, which will the get executed in the context of the `store.js` file.\n\n```javascript\n{\n  store: {\n    plugins: [require('vuex-persistedstate')]\n  }\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__polyfills'\u003e\u003cb\u003epolyfills\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eAdd selected polyfills to support older browsers.\u003c/p\u003e\n\u003c/summary\u003e\n\nWe use [core-js] under the hood, the following are used by default:\n\n```javascript\n{\n  polyfills: ['promise', 'array/includes', 'string/includes', 'object/entries']\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__babel'\u003e\u003cb\u003ebabel\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eCustomize your applications babel config.\u003c/p\u003e\n\u003c/summary\u003e\n\nDefault babel config used:\n\n```javascript\n{\n  babel: {\n    presets: ['vue-app']\n  }\n}\n```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003e\n  \u003ca href='#config__meta'\u003e\u003cb\u003emeta\u003c/b\u003e\u003c/a\u003e\n  \u003cp\u003eInject meta tags into your index.html.\u003c/p\u003e\n\u003c/summary\u003e\n\n```javascript\n{\n  meta: [\n    { name: 'mobile-web-app-capable', content: 'yes' }\n  ]\n}\n```\n\u003c/details\u003e\n\n[vuejs]: https://vuejs.org/\n[vue-router]: https://router.vuejs.org/en/\n[vuex]: https://vuex.vuejs.org/en/\n\n[nuxt.js]: https://github.com/nuxt/nuxt.js\n[next.js]: https://github.com/zeit/next.js\n[vbuild]: https://github.com/egoist/vbuild\n[core-js]: https://github.com/zloirock/core-js/\n\n[router]: #config__router\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcj%2Fvues","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcj%2Fvues","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcj%2Fvues/lists"}