{"id":50,"date":"2022-01-01T12:00:00","date_gmt":"2022-01-01T12:00:00","guid":{"rendered":"http:\/\/frontendguruji.com\/?p=50"},"modified":"2022-07-01T20:06:25","modified_gmt":"2022-07-01T20:06:25","slug":"how-to-setup-a-vue-js-project-without-cli","status":"publish","type":"post","link":"https:\/\/frontendguruji.com\/blog\/how-to-setup-a-vue-js-project-without-cli\/","title":{"rendered":"How to setup a Vue JS project without CLI [Best way to learn Vue environment][Including SFC’s & Vue Router v4]"},"content":{"rendered":"\n

Hello Friends! 🙏. Today we will setup Vue Js project without CLI<\/strong> and this is the best way to learn Vue 3 project environment<\/strong>. <\/p>\n\n\n\n

Vue CLI provides a command<\/a>, that can setup Vue JS project easily, most of the developers use it for saving time ⏳ & offcourse saving brain 🧠 too 😁 but they skip most of the important things used behind the scenes to build a project and later when they are told to do any changes in the setup, they had no idea about the same 😯.<\/p>\n\n\n\n

So to help understanding behind the scene technologies, in this Vue JS tutorial<\/strong>, we will setup Vue 3 with Webpack, from scratch, without using Vue CLI<\/strong>😎. And while doing that, we will explore all dependencies needed to setup vue 3 with Webpack.<\/p>\n\n\n\n

Chalo suru kiya jaye!<\/strong>🍻 Lets start! <\/strong>🕺<\/p>\n\n\n\n

Step 1: Install\/Upgrade\/Verify Node<\/h2>\n\n\n\n

To start with setup Vue 3 project, first please verify if your machine has node v >= 14 & npm v >=5.6.
If not, then install node package here<\/a>.<\/p>\n\n\n\n

While upgrading node package on my machine to latest version: 16.13.1 which includes npm 8.1.2, I faced one issue, may be you also get this type of error, check here to resolve it: WARN npm does not support Node.js v16.13.1<\/a><\/p>\n\n\n\n

Step 2: Initialize a folder<\/h2>\n\n\n\n

So friends! first thing we have to do is to create a blank folder 📁 & initialize it using below command<\/p>\n\n\n\n

npm init<\/code><\/pre>\n\n\n\n
This command will run a wizard of questions\/choices related to the project & we have to answer\/select them. This basically creates a package.json<\/strong> file which will include all our answers\/selections.<\/p>\n\n\n\n
\"vue<\/figure>\n\n\n\n
Step 3: Setup Vue JS  Project without CLI – Adding Dependencies<\/h2>\n\n\n\n
Adding Vue 3<\/h3>\n\n\n\n
To use Vue JS v3<\/strong> we need core vue <\/strong>package that contains the functionality needed to define Vue components.<\/p>\n\n\n\n
As we have installed the latest vue-router@4 <\/strong> package i.e. v4, there are many breaking changes. So better read the v4 documentation<\/a> before diving into it.<\/p>\n\n\n\n
npm install vue@next vue-router@4<\/code><\/pre>\n\n\n\n
 vue\/compiler-sfc <\/strong>is Vue JS compiler and used to convert our Vue files into JavaScript. Needed for Single File Components (SFCs)<\/strong><\/p>\n\n\n\n
npm install --save-dev @vue\/compiler-sfc<\/code><\/pre>\n\n\n\n
Adding Babel – JS Compiler<\/h3>\n\n\n\n
Babel is a compiler which converts ES6 code to ES5 code, so that older browser can also run the application.
So basically It lets us write modern JavaScript code that still works in older browsers.<\/p>\n\n\n\n
npm install --save-dev @babel\/core @babel\/preset-env<\/code><\/pre>\n\n\n\n
babel\/core<\/strong> contains the main babel functionality i.e. converting the modern JS to ES5.
babel\/preset-env<\/strong> this is helpful for multiple syntax transforms\/browser polyfills that are needed by the target environment\/browsers.<\/p>\n\n\n\n
Adding Webpack – Bundler<\/h3>\n\n\n\n
Webpack is a bundler for modern JS projects, this basically combines all the modules used in the project to one or multiple bundles<\/p>\n\n\n\n
npm install --save-dev webpack webpack-cli webpack-dev-server<\/code><\/pre>\n\n\n\n
webpack <\/strong>contains the core functionality and webpack-cli<\/strong> is to run webpack from command line.
webpack-dev-server<\/strong> is to view projet in browser locally while development.<\/p>\n\n\n\n
By default Webpack process only JS files and to process other assest like images, CSS & HTML it requires loaders, below are some basic loaders:<\/p>\n\n\n\n
npm install --save-dev babel-loader vue-loader@next html-loader css-loader vue-style-loader\n<\/code><\/pre>\n\n\n\n
babel-loader<\/strong>: loader for babel files
html-loader<\/strong>: loader for HTML files
vue-loader@next<\/strong>: loader to author Vue v3 <\/strong>components in a Single-File Components (SFCs) format <\/strong>
css-loader<\/strong>: loader for CSS files
vue-style-loader<\/strong>: it similar to webpack style-loader and dynamically inject CSS into the document as style tags and used by default in vue-loader, needed for Single File Components (SFCs)<\/strong><\/p>\n\n\n\n
Optional<\/em>: To use CSS preprocessors like SCSS<\/strong>, you will have to install sass-loader <\/strong>& sass<\/strong>.<\/p>\n\n\n\n
npm install --save-dev sass-loader sass<\/code><\/pre>\n\n\n\n
By default Webpack bundles CSS into JS, to generate seperate CSS file, you will have to install mini-css-extract-plugin<\/strong><\/p>\n\n\n\n
npm install --save-dev mini-css-extract-plugin
\ufeff<\/code><\/pre>\n\n\n\n
Now we need a HTML page to inject all the files\/bundles generated by Webpack. For that we need to add html-webpack-plugin<\/strong>.<\/p>\n\n\n\n
npm install --save-dev html-webpack-plugin<\/code><\/pre>\n\n\n\n
Now our package.json<\/strong> file looks like this:<\/p>\n\n\n\n
\"vue<\/figure>\n\n\n\n
That’s all in the dependencies 😅, lets jump to create an App then some configurations and then will try to run it 🕺.<\/p>\n\n\n\n
Step 4: Creating ‘Hello World’ Vue App<\/h2>\n\n\n\n
Create src <\/strong>folder📁 and then create a component App.vue<\/strong> in it, here we are using Single File Components<\/strong> (SFCs).<\/p>\n\n\n\n
This means we will be declaring template<\/strong>, styles <\/strong>and script <\/strong>in the same file.  <\/p>\n\n\n\n
\/\/ sr\/App.vue<\/strong>\n<script<\/strong>>\nexport default {\n  data() {\n    return {\n      greeting: \"Hello, World!\",\n    };\n  },\n};\n<\/script>\n\n<template<\/strong>>\n  <div class=\"message\">{{ greeting }}<\/div>\n<\/template>\n\n<style <\/strong>lang=\"scss<\/strong>\">\n@import \".\/styles.scss\";\n<\/style>\n<\/code><\/pre>\n\n\n\n
Now create a style for the App component styles.scss<\/strong>.<\/p>\n\n\n\n
\/\/ src\/styles.scss<\/strong>
.message {
    text-align: center;
    font-size: 30px;
}<\/code><\/pre>\n\n\n\n
Now we need to create the main entry file (index.js<\/strong>) which will render the app in a DOM element having id=”root<\/strong>“, this element we will create later in this tutorial.<\/p>\n\n\n\n
Here vue-router<\/strong> will be handling the application routes.
createRouter method requires history and routes array. Here we have:
Hash history mode<\/strong> is created with createWebHashHistory()<\/strong>: It uses a hash character (#) in URL, which is not good for SEO.
HTML5 history <\/strong>mode is created with createWebHistory()<\/strong>: It uses normal url and this is the recommended one.<\/strong><\/p>\n\n\n\n
\/\/ src\/index.js<\/strong>\nimport * as Vue from \"vue\";\nimport * as VueRouter from \"vue-router<\/strong>\";\nimport App from \".\/App.vue\";\n\nconst routes = [{ path: \"\/\", component: App }];\nconst router = VueRouter.createRouter<\/strong>({\n  routes,\n  history: VueRouter.createWebHistory()<\/strong>,\n});\n\nconst app = Vue.createApp<\/strong>(App);\napp.use(router)<\/strong>;\napp.mount(\"#root<\/strong>\");\n<\/code><\/pre>\n\n\n\n
Step 5: Configure Webpack<\/h2>\n\n\n\n
Now we will have to configure webpack, webpack-dev-server, loaders and plugins that we installed above 😅, lets start!<\/p>\n\n\n\n
Create a blank webpack configuration file webpack.config.js<\/strong> in the root folder and start adding the below configurations.<\/p>\n\n\n\n
Below is the main configuration for webpack<\/strong>, here you have to give the entry<\/strong> point of the file (index.js<\/em> in our case) and output <\/strong>path for the generated bundles (dist <\/em>in our case). Empty configurations like devServer, rules, plugins will configure one by one below.<\/p>\n\n\n\n
\/\/ \/webpack.config.js<\/strong>
\/\/ imports
const path = require('path');

\/\/ module
module.exports = {
  mode: 'development',
  entry<\/strong>: '.\/src\/index.js<\/strong>',
  output<\/strong>: {
    path: path.resolve(__dirname, 'dist<\/strong>')
  },
  devServer: {},
  rules: [],
  plugins: []
};<\/code><\/pre>\n\n\n\n
Now we will configure loaders<\/strong> in module rules: [] <\/strong>defined above<\/p>\n\n\n\n
Configure SCSS<\/strong>.<\/h3>\n\n\n\n
Note: Loaders are evaluated\/executed from bottom to top.<\/em>
Here execution starts with sass-loader, continues with css-loader and finally ends with style-loader.<\/p>\n\n\n\n
{
  test:\/\\.scss$\/,
  use: [{
      loader: 'style-loader'
    },
    {
      loader: 'css-loader'
    },
    {
      loader: 'sass-loader'
    }
  ]
}<\/code><\/pre>\n\n\n\n
Configure vue-loader<\/strong> <\/h3>\n\n\n\n
{\n  test: \/\\.vue$\/i,\n  exclude: \/(node_modules)\/,\n  use: {\n    loader: \"vue-loader\",\n  },\n}<\/code><\/pre>\n\n\n\n
Configure Babel<\/strong><\/h3>\n\n\n\n
babel-loader<\/strong> configuration.
options.preset<\/strong> will tell babel to use these presets while compiling the code.<\/p>\n\n\n\n
{\n  test: \/\\.(js|jsx)$\/,\n  exclude: \/(node_modules)\/,\n  use: {\n    loader: 'babel-loader',\n    options: {\n      presets: [\"@babel\/preset-env\"],\n    },\n  }\n}<\/code><\/pre>\n\n\n\n
Configure html-loader<\/strong><\/h3>\n\n\n\n
{
  test: \/\\.html$\/i,
  loader: \"html-loader\",
}<\/code><\/pre>\n\n\n\n
Configure plugins<\/strong><\/h3>\n\n\n\n
mini-css-extract-plugin<\/strong> will extract the styles.css from bundle and generates a seperate file.
html-webpack-plugin<\/strong> will create html file at dist\/index.html<\/strong> and will automatically inject all the webpack generated files along with the CSS gerenated by mini-css-extract-plugin.<\/p>\n\n\n\n
\/\/ add in imports<\/strong>\nconst MiniCssExtractPlugin = require(\"mini-css-extract-plugin\");\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst { VueLoaderPlugin } = require(\"vue-loader\");\n\n\/\/ add in plugins array<\/strong>\nnew VueLoaderPlugin(),\nnew MiniCssExtractPlugin(),\nnew HtmlWebpackPlugin({\n  template:\".\/src\/index.html<\/strong>\"\n})\n\n\/\/ add in rules array<\/strong>\n{\n  test: \/\\.css$\/i,\n  use: [MiniCssExtractPlugin.loader, \"css-loader\"],\n},<\/code><\/pre>\n\n\n\n
for html-webpack-plugin<\/strong> we need to create a html template which will be used by this plugin to inject the scripts & styles generated by webpack. For tha create index.html<\/strong> file inside src folder 📁. This html will contain the element having id=”root<\/strong>“, this will be the element where app will load.<\/p>\n\n\n\n
<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" \/>
    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>
    <title>Hello World App<\/title>
  <\/head>
  <body>
    <div id=\"root<\/strong>\"><\/div>
  <\/body>
<\/html>
\ufeff<\/code><\/pre>\n\n\n\n
Configure webpack-dev-server<\/strong>.<\/h3>\n\n\n\n
It needs directory <\/em>which must be path to the dist <\/strong>folder and a port <\/em>to run on. If you want webpack to open the App in browser automatically provide open: true<\/strong>.<\/p>\n\n\n\n
devServer: {
  static: {
    directory<\/strong>: path.join(__dirname, 'dist'),
  },
  port<\/strong>: 9000,
  open: true
}<\/code><\/pre>\n\n\n\n
Check here the final webpack.config.js<\/strong> file.<\/a><\/p>\n\n\n\n
Step 6: Adding build commands<\/h2>\n\n\n\n
To build or run the project we will have to add some commands in package.json file under scripts property.<\/p>\n\n\n\n
\"scripts\": {
  \"start\": \"webpack-dev-server\",
  \"build\": \"webpack\"
}<\/code><\/pre>\n\n\n\n
start <\/strong>command will execute webpack-dev-server which will build the project in memory<\/em> and load the page on the browser.
build<\/strong> command will build the project in dist <\/em>folder with all the files.<\/p>\n\n\n\n
Check here the final package.json<\/strong> file.<\/a><\/p>\n\n\n\n
Now the final moment😅 🥳🥳<\/p>\n\n\n\n
npm run start \/\/ to start the app in browser
npm run build \/\/ to generate the dist folder with files<\/code><\/pre>\n\n\n\n
\"vue<\/figure>\n\n\n\n
And in source view, you can see the injected JS and Style file.<\/p>\n\n\n\n
\"vue<\/figure>\n\n\n\n
👉Checkout the project here. <\/strong><\/a><\/p>\n\n\n\n
Thats all in this Vue JS tutorial<\/strong>, here we learned how to setup Vue 3 project from scratch without  using Vue CLI<\/strong> and also learned how to configure webpack<\/strong>, configure babel<\/strong>, configure Webpack loaders and plugins<\/strong>, added build commands<\/strong>. <\/p>\n\n\n\n
❓If you have any question or suggestion, please feel free to comment. <\/p>\n\n\n\n
Thanks🙏.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this Vue JS tutorial, you will learn how to setup vue js project without cli, this is the best way to learn vue 3 environment.We will setup vue 3 with webpack and will configure babel, Webpack loaders and plugins and add build commands.<\/p>\n","protected":false},"author":1,"featured_media":187,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"categories":[8],"tags":[29,21,12,18,7,43,35,37,44,9,41,42,45,23,36],"_links":{"self":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/50"}],"collection":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":0,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media\/187"}],"wp:attachment":[{"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/frontendguruji.com\/blog\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}