Original Post: https:\/\/compositecode.blog\/2022\/01\/12\/a-shiny-new-vuejs-v3-web-app-using-deployed-to-amplify-appsync-cognito\/<\/a><\/p>\n\n No cruft, let's just start.<\/p>\n\n These details plus yarn and a few other notes are available and derived from the Amplify Docs located here<\/a>. What I've done is take those docs and add some specific details and information for this happy path. It includes additional references for the steps I took, and specifically what I'm running this on for this particular tutorial. As noted below, there is a section where this deviates from those steps and I get into next steps beyond the initial setup of the app, Amplify, and AppSync. I'll note that part of this tutorial, or you can navigate directly to that part with this anchor thatPartiDeviate.<\/p>\n\n You'll need the following for this specific tutorial. If you're acclimate to various OSes and their respective needs around this software, you can get this sorted yourself and it's mostly the same for each OS, but for this tutorial I'm rolling with MacOS Big Sur v11.6.2.<\/p>\n\n A few first steps that only need done once. If you've already setup your First, get the Vue.js v3 base app skeleton running. Issuing this command will then provide prompts to select Vue.js v3 Preview (or likely just v3 when fully released, which will come along with other tooling as needed). Once this is done, following the standard steps of navigating into the directory Next initialize the Vue.js App as an Amplify Project and get some defaults set and accepted. Executing \n \n \n Prerequisites\n<\/h2>\n\n
\n
yarn global add @vue\/cli<\/code> does the job.<\/li>\nnpm install -g @aws-amplify\/cli<\/code> or get it via cURL \ud83d\udc4d\ud83c\udffb curl -sL https:\/\/aws-amplify.github.io\/amplify-cli\/install | bash && $SHELL<\/code> and of course, Windows has gotta be Windowsy with \ud83d\ude11 curl -sL https:\/\/aws-amplify.github.io\/amplify-cli\/install-win -o install.cmd && install.cmd<\/code>.<\/li>\n<\/ul>\n\namplify<\/code> cli then this isn't needed a second time.<\/p>\n\n
\n<\/p>\n\nvue create mywhateverproject\n<\/code><\/pre>\n\n<\/div>\n\n\n\ncd myWhateverProejct<\/code> , then executing the yarn<\/code> command and finally yarn serve --open<\/code> will open up the running web app in your default browser.<\/p>\n\namplify init<\/code> and accepting the defaults will get this done. As displayed when done the Vue.js v3 App will now have multiple defaults and respective items selected.<\/p>\n\n
![\"Amplify](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--drTk0kEk--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/sszimswr505tr0bliglz.png\")
<\/a><\/p>\n\n![\"amplify](\"https:\/\/res.cloudinary.com\/practicaldev\/image\/fetch\/s--yezvrnXn--\/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880\/https:\/\/dev-to-uploads.s3.amazonaws.com\/uploads\/articles\/bab40fenqy6aqjen19af.png\")
<\/a><\/p>\n\n