2

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

Henry
  • 21
  • 3
  • *this is very important for me* - consider explaining your reasoning. – Estus Flask May 17 '21 at 14:46
  • 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 May 17 '21 at 14:56
  • 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 May 17 '21 at 16:01
  • 1
    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 May 17 '21 at 16:14
  • @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 May 17 '21 at 16:16
  • thanks for your replies, can you explain what does "You have to set up the webpack in the project yourself." mean? can I still set up custom directory structure manually and use npm to install packages instead of using CDN? – Henry May 17 '21 at 16:17
  • @BryceHowitson Agreed. I tried googling, couldn't find a single tutorial with the entire tech stack he wants + a manual installation. Henry, you have to install each piece manually. If you haven't done this by the time I get home, I'll edit my answer to include some links to each individual piece – Jordan May 17 '21 at 16:20
  • many thanks, @Jordan. I just created new folder and I am installing dependencies manually, you already helped me. including additional links would be great. thanks in advance – Henry May 17 '21 at 16:26
  • https://github.com/alefi87/vuejs-without-cli also https://stackoverflow.com/questions/59103389/is-it-possible-to-build-a-vue-application-without-vue-cli – Bryce Howitson May 17 '21 at 16:27
  • have anyone idea why webpack live-reload doesn't work? https://i.imgur.com/s03OF9I.png – Henry May 17 '21 at 18:14
  • Consider checking existing Vue+TS+Webpack boilerplates on GH. What you ask about cannot be covered with a single post, and asking specifically for learning resources is offtopic on SO. It isn't rocket science to create a usable Webpack setup but it requires some expertise and you'll have a hard time writing it from scratch and solving issues if you didn't do this before, because there are many things involved, some of which are tricky. The best way SO can help you in this case is to solve problems one by one. – Estus Flask May 17 '21 at 22:30
  • Check this tutorial for Vue v3 setup without vue-cli: https://frontendguruji.com/blog/how-to-setup-a-vue-js-project-from-scratch-without-vue-cli/ – Mandeep Pasbola Jan 02 '22 at 08:34

1 Answers1

1

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.

Jordan
  • 2,245
  • 6
  • 19
  • it's a new job task. they strictly forbid me using vue-cli, I am not sure how to create/import and use components, vue-router and other mentioned tools – Henry May 17 '21 at 15:47
  • @Henry look up npm and the packages you want. – Bryce Howitson May 17 '21 at 16:03
  • Updated my answer @Henry – Jordan May 17 '21 at 18:32
  • @BryceHowitson Am I missing anything that you can think of? – Jordan May 17 '21 at 18:34
  • npm ERR! Invalid package name "vue@next": name can only contain URL-friendly characters – Henry May 17 '21 at 18:45
  • I may have got the package name wrong. Remove it from the file and do `npm install --save vue@next` – Jordan May 17 '21 at 18:57
  • @Jordan might be nice to include Webpack setup too... Adding `Webpack` & `Vue-loader` to the package and creating a webpack config. This is from [Webpack](https://lmiller1990.github.io/electic/posts/20200406_webpack_for_vue_3.html) for Vue3 though you've covered parcel so there'd be overlap. – Bryce Howitson May 17 '21 at 19:44
  • BTW this is a very good overview that doesn't seem to exist this succinctly elsewhere on the internets. – Bryce Howitson May 17 '21 at 19:52
  • Good idea @BryceHowitson might be a little too much to explain in a simple post though which was mostly why I used parcel as the example. I'll see if I can concisely explain it when I get some free time. Thanks – Jordan May 17 '21 at 20:30