{"id":13506848,"url":"https://github.com/tomimick/tm-nuxtjs-starter","last_synced_at":"2025-03-30T05:31:26.509Z","repository":{"id":145660376,"uuid":"145205106","full_name":"tomimick/tm-nuxtjs-starter","owner":"tomimick","description":"Vue + Nuxtjs + Vuex starter","archived":false,"fork":false,"pushed_at":"2019-01-01T16:14:00.000Z","size":333,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-01T05:32:54.303Z","etag":null,"topics":["axios","nuxtjs","starter-kit","static-site","vue","vuex"],"latest_commit_sha":null,"homepage":"https://nuxtjs.tomicloud.com/","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/tomimick.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-18T08:55:04.000Z","updated_at":"2021-01-13T12:07:02.000Z","dependencies_parsed_at":null,"dependency_job_id":"52114573-fac6-463d-ad9f-6ecc69547331","html_url":"https://github.com/tomimick/tm-nuxtjs-starter","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/tomimick%2Ftm-nuxtjs-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nuxtjs-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nuxtjs-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tomimick%2Ftm-nuxtjs-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tomimick","download_url":"https://codeload.github.com/tomimick/tm-nuxtjs-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246281099,"owners_count":20752203,"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":["axios","nuxtjs","starter-kit","static-site","vue","vuex"],"created_at":"2024-08-01T01:00:58.854Z","updated_at":"2025-03-30T05:31:26.490Z","avatar_url":"https://github.com/tomimick.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"\nThis is my minimal yet functional Vue starter kit and demo app as of\nAugust 2018.\n\nIf you feel tired of Javascript fatigue, and want to get started quick and\neasy, take a peek of this.  Developing a modern Vue app does not get\nmuch simpler than this.\n\n\nLIVE DEMO [nuxtjs.tomicloud.com](https://nuxtjs.tomicloud.com)\n--------------------------------------------------------------\n\n![Screenshot](docs/screenshot.png)\n\nThe demo app is a static site, a basic single-page-app that has a few\naddressable pages that are lazy loaded on-demand. It demonstrates basic CRUD\noperations: 1) list movies, 2) view movie details, 3) create/edit and 4)\ndelete a movie.\n\nThe demo uses browser localStorage for the data storage, which means it runs\nwithout a backend.  The sources do contain a module that does real AJAX calls\nto a REST backend - you just need to enable the module and write a server, and\nyou are in good track to have a real web app. I have developed\n[RESTPie3 Python REST API server](https://github.com/tomimick/restpie3) which\nimplements this simple movie API as an example.\n\n\nBuilding blocks\n---------------\n\nThe demo app consists of a simple but powerful tech stack that provides the\nessential functionality for creating modern web apps. It stands on the\nshoulders of a few great libraries:\n\n* [Vue](https://vuejs.org/) is a practical and elegant Javascript library for\n  modern web dev\n* [Nuxtjs](https://nuxtjs.org/) is a lightweight Javascript framework that\n  provides structure and basic core functionality for Vue apps\n* [Vuex](https://vuex.vuejs.org/) is a quick and easy state management library\n  that Nuxtjs supports natively\n* [SASS](https://sass-lang.com/) is the good old CSS extension language that\n  still does the job fine\n* [Axios](https://github.com/axios/axios) is a popular AJAX library based on\n  Promises\n\nSource tree\n-----------\n\n```\n├── /assets/                    # assets to be processed by Nuxt\n│   └── /layout.sass              # main layout of site\n├── /components/                # vue components used by pages\n│   └── /myheader.vue             # site header component\n├── /layouts/                   # page top-level layouts\n│   └── /default.vue              # main site layout\n├── /pages/                     # pages\n│   ├── /about.vue                # about page\n│   ├── /index.vue                # home page, lists movies\n│   ├── /moviedetails.vue         # details page, views a movie\n│   └── /movieedit.vue            # edit page, edits a movie\n├── /static/                    # static assets, accessed/exported as is\n│   ├── /favicon.ico              # favicon\n│   └── /exampledata/\n│       └── /movies.json          # sample list of 4 movies - loaded initially\n├── /store/                     # data stores managed by Vuex\n│   └── /index.js                 # the single store for this app\n├── config.js                   # app config, select ajax or localstorage\n├── nuxt.config.js              # nuxtjs config\n├── package-lock.json           # npm something\n├── package.json                # list of npm packages required\n├── README.md                   # this doc\n├── serverapi_ajax.js           # API, talks AJAX to a real backend\n└── serverapi_localstorage.js   # API, talks to localStorage\n```\n\nLocal development\n-----------------\n\nHere's how to run the starter in your local machine:\n\n```bash\n$ git clone https://github.com/tomimick/tm-nuxtjs-starter\n$ cd tm-nuxtjs-starter\n$ npm install\n$ npm run dev\n```\n\nThen point your browser to http://localhost:3000.\n\nWhen any of the dependant files is modified, the changes are hot loaded and\nbecome visible instantly. Enjoy the dev!\n\n\nNuxt.js\n-------\n\n[Nuxtjs](https://nuxtjs.org/) is a great little framework that brings\nstructure and core SPA functionality to Vue-based apps. It makes it easy to\nstart the app development, letting you focus on your core app, but also\nprovides practices to guide you in creating a more complicated app.\n\nNuxt.js benefits in a nutshell:\n\n* Minimum configuration - no need to tinker with webpack or babel configs,\n  unless you want\n* Enforces structure to the source files - guidance for crafting apps in\n  a logical and documented manner\n* Hot reloading of pages to speedup the dev work\n* Built-in SPA routing logic\n* Automatic code splitting of pages, transpiling of js\n* Deployment options: export a static server-less site or run Node.js in the\n  backend\n\nNuxt.js takes advantage of Vue's [Single File Components](https://vuejs.org/v2/guide/single-file-components.html)\nwhich is an excellent practical solution to encapsulate the template, logic\nand styling of a Vue component together in the same source file.\n\nNuxt.js is directly inspired by [Nextjs](https://nextjs.org/) which is the\nsame framework for the React ecosystem. Nuxt.js introduces a little more\nhierarchy, having folders for layouts, plugins, and middleware.\n\n\nVuex state management\n---------------------\n\nSince Nuxtjs has the tooling to support developing an app with lots of data\nand code, one usually needs some kind of state management solution for sharing\ndata across pages and components.\n\nNuxtjs natively integrates with [Vuex](https://vuex.vuejs.org/) state\nmanagement library. This is a well crafted library which is authored by Evan\nYou, the same talented guy who created Vue. Vuex is simple enough to learn\nquickly. You construct your store from state data, and mutations and action\nfunctions.\n\nTo activate vuex, you just drop a store component in the store/ folder, where\nNuxt picks it up from and makes it available as ```this.$store``` in all Vue\npage components.  That is all to it, no further configuration is required.\n\nIt is also possible to use other state libraries like\n[MobX](https://mobx.js.org/) but because of the built-in integration, Vuex is\na natural choice with Nuxtjs.\n\n\nGenerating a static site\n------------------------\n\nThe ability to generate a static site with Nuxtjs is an important tool which\nmakes it possible to run apps without a backend server. You can export the\nsite to [GitHub pages](https://pages.github.com/),\n[Netlify](http://netlify.com) or Amazon S3. (But check a few gotchas with\nsite+link prefixes with Github pages.)\n\nAnother win of static generation is to be able to hook up the app with any\nREST backend no matter what is the language of the backend. Clean separation of\nfrontend and backend also provides modularization at tech level and possibly\nat team level.\n\nTo generate a static site, simply run\n\n```bash\n$ npm run export\n```\n\nAnd the static files will be generated in the ```dist```-folder.\n\nTo test the static site locally via a local www-server, I quickly run a\npython script: (python3 -m http.server)\n\n```bash\n$ npm run pyserve\n```\n\nAnd then test the site at http://localhost:8000.\n\n### Size of Javascript\n\nNuxtjs performs well, generating a home page whose size is **only about 69KB\nminified and gzipped**. This is a good result out of the box.\n\nThe browser loads the home page with a total of 4 requests, and each new page\nthat is loaded on-demand makes a single js request *once*.\n\n```bash\nPage Size Inspector Report\nURL: https://nuxtjs.tomicloud.com/\n\nREQUEST                                       REQ     BYTES\n\nTOTAL___________________________________________4____68,802\n\nDocument________________________________________1_______960\n-nuxtjs.tomicloud.com/                                  960\n\nScript__________________________________________3____67,842\n-nuxtjs.tomicloud.com/_.../0b088016842f5f4f735       53,552\n-nuxtjs.tomicloud.com/_.../1c78d24f170a4f6d1ea       13,680\n-nuxtjs.tomicloud.com/_.../f17a22e19f8ece7f59c          610\n```\n\n(Report by my Chrome extension [Page Size Inspector](https://chrome.google.com/webstore/detail/oepnndnpjiahgkljgbohnnccmokgcoln).)\n\n\nVue vs React - my opinion\n-------------------------\n\nVue and React are both really good choices for modern web dev: they are based\non modern reactive/virtual DOM concept, they are lightweight and hugely\npopular with big ecosystems. A developer can't always choose between these\ntwo, but if one can, in the end it maybe a matter of taste which one a\ndeveloper considers better. The taste decision usually comes down to a\nphilosophy of whether you like JSX or templates.\n\nIf I can choose my weapon for a front-end project, I would choose Vue. The\nprimary reason for me is code readability and personal productivity. I can\nread and write HTML templates with Javascript ASIDE more easily than JSX.\nLong JSX runs can be dizzying and somewhat noisy.  A template decorated with\njust a few directives just feels more readable to me. I like to see the HTML\nbuilding blocks first in the line, not JSX map()-functions or ternary\noperators or short-circuits.  I suppose templates feel more natural to me\nbecause of my history of working with the 3 elementary building blocks of the\nweb, HTML, JS, and CSS, long before the Javascript overlord took over the\nworld.\n\nI highly appreciate the separation of 3 concerns that is practiced in Vue\n[Single File\nComponents](https://vuejs.org/v2/guide/single-file-components.html).  I guess\nI represent the old school thinking which says that the view, logic and\nstyling should have some separation between them and should not be mixed\nall-together.  They DO have coupling between them, that is a natural thing,\nand they should be located NEAR each other, preferably in the same source\nfile, but not intermixed.  Too tight coupling may end up in spaghetti.\n\nHowever, I also understand the opposing views which state that React is better\nover Vue, and which argue that another template DSL is the weaker approach. If\nyou come from a Javascript background, React may feel more natural for you. I\ncan work with both choices (I even made these 2 starter kits!) but maybe Vue\nhas a slight edge for me.\n\nIf you want to read about one of the recent decent Vue vs React debates, check\nthis [Reddit\nthread](https://www.reddit.com/r/javascript/comments/8o781t/vuejs_or_react_which_you_would_chose_and_why/).\n\n\nNeed help?\n----------\n\nGo ahead and take this Vue starter and perhaps my [RESTPie3 Python REST API\nserver](https://github.com/tomimick/restpie3) too and build your great\nservice.\n\nYou can also [contact me](mailto:tomi.mickelsson@gmail.com) to ask if I am\navailable for freelancing work.\n\n\nReact version\n-------------\n\nIf you prefer React over Vue, I have also coded this same starter with\n[React Nextjs](https://github.com/tomimick/tm-nextjs-starter).\n\nLicense\n-------\nMIT License\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Ftm-nuxtjs-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomimick%2Ftm-nuxtjs-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomimick%2Ftm-nuxtjs-starter/lists"}