Vuejs V3

Posted on  by admin

At the center of every Vuex application is the store. A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object:. Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state.

The only way to change a store's state is by explicitly committing mutations. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.

We will be using ES2015 syntax for code examples for the rest of the docs.

# Getting Started

If you haven't picked it up, you should(opens new window)! After installing Vuex, let's create a store. It is pretty straightforward - just provide an initial state object, and some mutations:.

Now, you can access the state object as store.state, and trigger a state change with the store.commit method:. In order to have an access to this.$store property in your Vue components, you need to provide the created store to Vue instance.

No Need to Eject

Vuex has a mechanism to "inject" the store into all child components from the root component with the store option:.

If you're using ES6, you can also go for ES6 object property shorthand notation (it's used when object key has the same name as the variable passed-in as a property):.


Future Ready

Now we can commit a mutation from component's method:. Again, the reason we are committing a mutation instead of changing store.state.count directly, is because we want to explicitly track it.

This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code.

In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging.

Graphical User Interface

Using store state in a component simply involves returning the state within a computed property, because the store state is reactive. Triggering changes simply means committing mutations in component methods.

Here's an example of the most basic Vuex counter app(opens new window). Next, we will discuss each core concept in much finer details, starting with State. Out-of-the-box support for Babel, TypeScript, ESLint, PostCSS, PWA, Unit Testing & End-to-end Testing.

Instant Prototyping

The plugin system allows the community to build and share reusable solutions to common needs. Vue CLI is fully configurable without the need for ejecting.

This allows your project to stay up-to-date for the long run. Create, develop and manage your projects through an accompanying graphical user interface.

Instantly prototype new ideas with a single Vue file. Effortlessly ship native ES2015 code for modern browsers, or build your vue components as native web components.

Create a project:.

Optional: To use CSS preprocessors like SCSS, you will have to install sass-loader & sass.

By default Webpack bundles CSS into JS, to generate seperate CSS file, you will have to install mini-css-extract-plugin

Now we need a HTML page to inject all the files/bundles generated by Webpack. For that we need to add html-webpack-plugin.

Now our package.json file looks like this:

That’s all in the dependencies 😅, lets jump to create an App then some configurations and then will try to run it 🕺.

Feature Rich

Create src folder📁 and then create a component App.vue in it, here we are using Single File Components (SFCs).

This means we will be declaring template, styles and script in the same file.

Now create a style for the App component styles.scss.

Now we need to create the main entry file (index.js) which will render the app in a DOM element having id=”root“, this element we will create later in this tutorial.

Here vue-router will be handling the application routes.
createRouter method requires history and routes array. Here we have:
Hash history mode is created with createWebHashHistory(): It uses a hash character (#) in URL, which is not good for SEO.
HTML5 history mode is created with createWebHistory(): It uses normal url and this is the recommended one.

# The Simplest Store

Now we will have to configure webpack, webpack-dev-server, loaders and plugins that we installed above 😅, lets start!

Create a blank webpack configuration file webpack.config.js in the root folder and start adding the below configurations.

Below is the main configuration for webpack, here you have to give the entry point of the file (index.js in our case) and output path for the generated bundles (dist in our case). Empty configurations like devServer, rules, plugins will configure one by one below.

Now we will configure loaders in module rules: [] defined above

Configure SCSS.

Note: Loaders are evaluated/executed from bottom to top.
Here execution starts with sass-loader, continues with css-loader and finally ends with style-loader.

Configure vue-loader

Configure Babel

babel-loader configuration.
options.preset will tell babel to use these presets while compiling the code.

Configure html-loader

Configure plugins

mini-css-extract-plugin will extract the styles.css from bundle and generates a seperate file.
html-webpack-plugin will create html file at dist/index.html and will automatically inject all the webpack generated files along with the CSS gerenated by mini-css-extract-plugin.

for html-webpack-plugin 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 file inside src folder 📁. This html will contain the element having id=”root“, this will be the element where app will load.

Configure webpack-dev-server.

It needs directory which must be path to the dist folder and a port to run on. If you want webpack to open the App in browser automatically provide open: true.

Step 6: Adding build commands

To build or run the project we will have to add some commands in package.json file under scripts property.

start command will execute webpack-dev-server which will build the project in memory and load the page on the browser.
build command will build the project in dist folder with all the files.

Now the final moment😅 🥳🥳

And in source view, you can see the injected JS and Style file.

Thats all in this Vue JS tutorial, here we learned how to setup Vue 3 project from scratch without using Vue CLI and also learned how to configure webpack, configure babel, configure Webpack loaders and plugins, added build commands. If you have any question or suggestion, please feel free to comment.