How to create vue.js3 app using typescript/vue-router/vuex/ but without vue-cli

Question

My task is to create a vue3 application with typescript support, also I have to use vuex for state management and vue-router for basic routing. but I can't use vue-cli in this project

my current code:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://unpkg.com/vue-router@4"></script>
    <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
</head>

as I have never used typescript in vue project
can you suggest to me any blog, tutorial where someone builds a vue3 app from scratch with those tools but without vue-cli?

Full taks:

Write the Login Form on the VueJS 3.0 Framework and using TypeScript. You should also use Vuex (State Management) to store data and manipulate it, such as recording, reading, and retrieving it from the server. @ Vue / cli should not be used in the project. You have to run the webpack in the project yourself.

this is very important for me.

Thanks in advance

this is very important for me - consider explaining your reasoning. — Estus Flask
I think he means with the CDN approach. Perhaps he's doing a progressive implementation by migrating parts of the site piece by piece. Then once there's enough codebase to justify the time spent on it, moving the entire thing to a Vue CLI project @EstusFlask — Jordan
Vue CLI just makes setting up a new site easier. It has nothing to do with how Vue works behind the scenes. This just means you need to set up the folder structure, package.json, and stuff on your own. — Bryce Howitson
Sounds like homework? Such a neatly and specifically defined task phrased the way it is. Perhaps it's a requirement to not use Vue CLI? Pretty shoddy task if it is because I don't know many people in the real world who don't use some form of scaffolding when starting a project @BryceHowitson — Jordan
@Jordan I agree on both counts, Just pointing out that Vue doesn't work any differently without the cli. And I'm 99% sure there are install guides without using the CLI. Feels like a tiny amount of googling would solve this... — Bryce Howitson

Jordan Jordan · Accepted Answer · 2021-05-17T14:59:46

If you can't use Vue CLI, you'll have to install the dependencies manually.

To keep things simple, you can use Parcel as the bundler.

This way you don't have to deal with configuring webpack.

Start by making sure Typescript is installed globally.

Next, configure your package.json like this:

{
  "name": "project name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "clean": "rm dist/bundle.js",
    "start": "parcel src/index.html",
    "build-prod": "parcel build src/index.html"
  },
  "dependencies": {
    "vue@next": "^2.6.12",
    "vuex": "2.0.0",
    "vue-router": "2.0.0"
  },
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  }
}

This includes the dependencies for Vue3, Vuex, Vue Router and for Parcel along with some setup scripts for parcel.

Execute yarn install or npm install to install all the dependencies.

Next make sure you have an App.vue, index.html and an index.ts inside a root src/ directory.

Lastly, create the following files at root:

vue.shim.d.ts

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "strict": true,
        "noImplicitReturns": true,
        "noImplicitAny": true,
        "module": "es6",
        "moduleResolution": "node",
        "target": "es5",
        "allowJs": true,
    },
    "include": [
        "./src/**/*"
    ]
}

Take a look at this awesome website: https://createapp.dev/parcel

It lets you configure a build without Vue CLI and implement the features you require.

You can generate a project with Vue and typescript ticked, download it and then add in Vue router and Vuex as required.

How to create vue.js3 app using typescript/vue-router/vuex/ but without vue-cli

1 Answers