{"id":16647781,"url":"https://github.com/tatsuukraine/vue-ssr-example","last_synced_at":"2025-04-09T16:21:41.435Z","repository":{"id":48701468,"uuid":"121044311","full_name":"TatsuUkraine/vue-ssr-example","owner":"TatsuUkraine","description":"Ready for use Example for Vue + Vuex + TS + SSR + Jest","archived":false,"fork":false,"pushed_at":"2021-07-13T18:10:03.000Z","size":203,"stargazers_count":22,"open_issues_count":1,"forks_count":14,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-09T16:21:25.513Z","etag":null,"topics":["hot-reload","javascript","jest","js","server-side-rendering","ssr","typescript","vue","vue-router","vue-ssr","vue-vuex","vuejs","vuex"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TatsuUkraine.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-10T18:55:12.000Z","updated_at":"2025-01-28T15:14:13.000Z","dependencies_parsed_at":"2022-09-08T02:20:56.921Z","dependency_job_id":null,"html_url":"https://github.com/TatsuUkraine/vue-ssr-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TatsuUkraine%2Fvue-ssr-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TatsuUkraine%2Fvue-ssr-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TatsuUkraine%2Fvue-ssr-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TatsuUkraine%2Fvue-ssr-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TatsuUkraine","download_url":"https://codeload.github.com/TatsuUkraine/vue-ssr-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248065287,"owners_count":21041872,"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":["hot-reload","javascript","jest","js","server-side-rendering","ssr","typescript","vue","vue-router","vue-ssr","vue-vuex","vuejs","vuex"],"created_at":"2024-10-12T08:45:46.720Z","updated_at":"2025-04-09T16:21:41.406Z","avatar_url":"https://github.com/TatsuUkraine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ready for use Example for Vue + Vuex + TS + SSR + Jest\n\nInspired by [Vue SSR](https://ssr.vuejs.org/en) and [Evan You example](https://github.com/vuejs/vue-hackernews-2.0)\n\n## API\n\nThis project uses [JSON API](http://jsonapiplayground.reyesoft.com/) playground that was made according to [JSON API Spec](http://jsonapi.org/)\nAPI layer is placed in **/src/api** folder (according to suggestions from Vuex doc)\n\nAPI layer uses Axios (implementation is in **/src/service**) transport to make requests over HTTP\n\n## Vuex\n\nStore is split on modules in **/src/store**\n\n## SSR (Server Side Rendering)\n\nThis project is configured with Webpack + Express.\n\n```vue\n\u003cscript\u003e\n    export default {\n        waitAsyncData: false, //default: true\n        \n        asyncData () {\n            return new Promise((res, rej) =\u003e res())\n        }\n    }\n\u003c/script\u003e\n```\n\nDuring server rendering, App will find matching Components by requested URL that has asyncData method.\n\n### Highly resomended\nMake API requests to fetch data, that will be used in child components or layouts,\nin `asyncData` - to prepare all needed data, that you are going to use. It will prevent you\nfrom problems when SSR rendered page and Client rendered page will be contains different result.\n\n`asyncData` should return Promise, that should be resolved after fetched data are ready for rendering.\n\nServer won't continue rendering until all asyncData will be resolved\n\nFor client build this method will be used on route change.\n\nBy default component won't be mounted (route won't be proceeded) until all asyncData methods \nfrom all matched components will be resolved. As a result this will prevent user from navigation, until all data will\nbe loaded for new route\n\nAs an option it can be switched off, but only for Client app with help of **waitAsyncData** flag.\n\nIf **waitAsyncData** will be **FALSE** asyncData won't block app from navigation. It still will \nstop rendering until Promise will be resolved.\n\n## .ENV\n\nYou can modify environment variables, that will be exported in\n`process.env`.\n\nDefault file `.env` should be placed in root folder. If needed path can be changed\nin `/build/env-loader.js`\n\nVariables in default file can be changed with `.env.{environent}`, where\n`environment` defines based on NODE_ENV. For example,\nif NODE_ENV='development' builder will try to load `.env.development`\nafter `.env` file\n\nProperties `VUE_ENV` and `NODE_ENV` in `.env` files will be ignored\n\nAlso you can create files with `.local` postfix (`.env.local`, `.env.{environent}.local`). Such files will be loaded last.\nThey are added to GitIgnore so you can use them as local config files\n\nAlongside with custom variables in .env file you can also specify\nvariables for server build. Default server target is **localhost:8080**\neven, if variables in `.env` files wasn't defined\n\n```\nPORT=8080\nHOST=localhost\n```\n\nDefault `process.env` object that will be available in you app after build\n\n```typescript\nNODE_ENV: 'development'\nVUE_ENV: 'client' // or 'server'\n```\n\n## TypeScript\n\nIn this example you can use ES6 style in `*.vue` alongside\nwith `*.ts` imports. TS support was configured to prevent using regular\n`*.js` files inside TS files (you still can import `.vue` components inside TS files).\n But it can be changed easily in `tsconfig.json`\nfile. In same time `*.ts` files can be imported anywhere (JS or Vue file)\n\nVue components doesn't use TS since it's overcomplicated in my opinion.\nBut it can be changed if needed just with [Vue Class Component](https://github.com/vuejs/vue-class-component) package\n\n## Jest\n\nThis example uses Jest for testing. In general it was used, just to get full stack example of project)\nTest files are placed in `/test` folder. You can run tests with\n\n``` bash\nnpm run test\n```\n\nThis test example was built based on `@vue/cli`\n\n## SEO (page headers)\n\nIf you're using SSR then you probably need it for SEO. Question is - how to manage page headers (title, meta and etc.)\n\nFor this purpose you can use mixin `DocumentHeaderMixin`. It's a raw example, probably you will want to use\nother packages that Vue\n\n```vue\n\n\u003cscript\u003e\n    import {DocumentHeaderMixin} from \"@/mixin\"\n    \n\n    export default {\n        metaInfo: {\n            title: 'BookTitle',\n        },\n        mixins: [DocumentHeaderMixin.getProperties()]\n    }\n\u003c/script\u003e\n\n```\n\nor with using `mapMixins`\n\n```vue\n\n\u003cscript\u003e\n    import {DocumentHeaderMixin} from \"@/mixin\"\n    import {mapMixins} from \"@/util\"\n    \n\n    export default {\n        metaInfo: {\n            title: 'BookTitle',\n        },\n        mixins: mapMixins(\n            DocumentHeaderMixin\n        )\n    }\n\u003c/script\u003e\n\n```\n\nBased on `VUE_ENV` will be exported or `ClientDocumentHeaderMixin` or `SSRDocumentHeaderMixin`\n\nPreferable to use this mixin on Component that attached to route in router config, to prevent\nmisunderstanding with Head info set. Depends on build (server or client) there is a different approach how to manage\nhead information. During SSR render each component will have `$ssrContext` property,\nwhich can be used to set up variables in `index.template.html` during server render.\n\nFor Client build - you can operate with DOM itself\n\n## Build setup\n\n**Requires Node.js 7+**\n\n``` bash\n# install dependencies\nnpm install # or yarn\n\n# serve in dev mode, with hot reload at localhost:8080\nnpm run dev\n\n# build for production\nnpm run build\n\n# serve in production mode\nnpm start\n\n# run tests\nnpm run test\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftatsuukraine%2Fvue-ssr-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftatsuukraine%2Fvue-ssr-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftatsuukraine%2Fvue-ssr-example/lists"}