{"id":21835916,"url":"https://github.com/daptin/vue_typescript_starter_kit","last_synced_at":"2025-04-14T09:20:23.900Z","repository":{"id":54638076,"uuid":"123483951","full_name":"daptin/vue_typescript_starter_kit","owner":"daptin","description":" Starter kit for VueJS + VueX + Typescript + Webpack + Daptin + MySQL + DockerCompose","archived":false,"fork":false,"pushed_at":"2018-03-02T14:38:38.000Z","size":119,"stargazers_count":14,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-14T09:19:58.742Z","etag":null,"topics":[],"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/daptin.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-03-01T19:42:18.000Z","updated_at":"2023-08-24T09:14:57.000Z","dependencies_parsed_at":"2022-08-13T22:20:47.784Z","dependency_job_id":null,"html_url":"https://github.com/daptin/vue_typescript_starter_kit","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/daptin%2Fvue_typescript_starter_kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daptin%2Fvue_typescript_starter_kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daptin%2Fvue_typescript_starter_kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daptin%2Fvue_typescript_starter_kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daptin","download_url":"https://codeload.github.com/daptin/vue_typescript_starter_kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852186,"owners_count":21171843,"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":[],"created_at":"2024-11-27T20:26:18.619Z","updated_at":"2025-04-14T09:20:23.618Z","avatar_url":"https://github.com/daptin.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# vuejs_typescript_starter_kit\n\nhttps://github.com/hmexx/vue_typescript_starter_kit\n\n\u003e A Vue.js/Typescript/Vuex/Webpack starter pack  \n\u003e I've basically tried to put together the minimum you need to get started   \n\u003e Typescript typing works throughout as far as I can tell, including within single-file VUE components  \n\u003e Webpack works great both in dev mode (dev server with auto-reload), and in build mode    \n\n# Backend Build Setup\n\n- Edit: schema_modals_daptin.yaml\n```\nTables:\n  - TableName: todo\n    Columns:\n      - Name: title\n        ColumnType: label\n        DataType: varchar(300)\n        IsIndexed: true\n      - Name: completed\n        ColumnType: truefalse\n        DataType: int(1)\n        Default: false\n```\n- Build docker image\n\n```./build.sh```\n- Bring up the backend, exposed at port `8080`\n\n```docker-compose up -d```\n\n\u003e Always rebuild docker image if changing schema_models_daptin.yaml\n\n# Client for backend\n\n```javascript\n\nimport {DaptinClient} from 'daptin-client'\n```\n\n\n\n```\nconst daptinClient = new DaptinClient(\"http://localhost:6336\", false);\ndaptinClient.worldManager.loadModels().then(function () {\n  daptinClient.jsonApi.findAll(\"todo\").then(function(res: any){\n    console.log(\"all todos\", res.data)\n  })\n})\n\n```\n\n\n## Frontend Build Setup\n\n``` bash\n# install dependencies\nnpm install\n\n# serve with hot reload at localhost:8081\nnpm run dev\n\n# build for production with minification\nnpm run build\n\n# build for production and view the bundle analyzer report\nnpm run build --report\n\n# run unit tests\nnpm run unit\n\n# run e2e tests\nnpm run e2e\n\n# run all tests\nnpm test\n```\n\nFor a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).\n\n## ...here's the vuex store that doesn't do much but is strongly-typed :-)\n\n```typescript\nimport Vue from 'vue'\nimport Vuex from 'vuex'\nimport { MutationTree, ActionTree } from 'vuex'\nimport * as T from '../types/common'\n\nVue.use(Vuex)\n\ninterface State {\n  links: [T.Link]\n}\n\nconst mutations: MutationTree\u003cState\u003e = {\n  reverse: (state) =\u003e state.links.reverse()\n}\n\nconst actions: ActionTree\u003cState, any\u003e = {\n}\n\nconst state: State = {\n  links: [\n    { url: \"https://vuejs.org\", description: \"Core Docs\" },\n    { url: \"https://forum.vuejs.org\", description: \"Forum\" },\n    { url: \"https://chat.vuejs.org\", description: \"Community Chat\" }\n  ]\n}\n\nexport default new Vuex.Store\u003cState\u003e({\n  state,\n  mutations,\n  actions\n});\n```\n\n## ...and here is one of the two VUE components in the project. so simple!\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv class=\"link\"\u003e\n      \u003ca :href=\"link.url\"\u003e{{link.description}}\u003c/a\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport Vue from \"vue\";\nimport Component from \"vue-class-component\";\nimport * as T from \"../types/common\";\n\n@Component({\n  name: \"LinkComponent\",\n  props: {\n    url: String,\n    description: String\n  }\n})\nexport default class cLink extends Vue {\n  link: T.Link = { url: \"\", description: \"Link\" };\n\n  mounted() {\n    this.link.url = this.$props.url || this.link.url;\n    this.link.description = this.$props.description || this.link.description;\n  }\n}\n\u003c/script\u003e\n\n\u003c!-- Add \"scoped\" attribute to limit CSS to this component only --\u003e\n\u003cstyle scoped\u003e\na {\n  color: #42b983;\n}\n\u003c/style\u003e\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaptin%2Fvue_typescript_starter_kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaptin%2Fvue_typescript_starter_kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaptin%2Fvue_typescript_starter_kit/lists"}