Using the Hardhat development environment we'll compile the Greeter smart contract, run a local Ethereum node and deploy the smart contract to the local blockchain.

Start by running the following command from the terminal inside of the vue-dapp directory:

npx hardhat compile

This compiles the Greeter.sol smart contract so that it can be deployed to the Ethereum blockchain.  It will generate an artifacts directory that contains the compiled smart contract including its ABI (Application Binary Interface).

Now you can start your local Ethereum blockchain with the following command:

npx hardhat node

With a local Ethereum node running we can now deploy the Getter smart contract to our local blockchain.

In a separate terminal window or tab, but in the same vue-dapp directory, let's deploy our smart contract.

It is not a requirement, but it is common practice to deploy our smart contracts in a script named deploy.js.  So inside of the scripts directory of the project change the name of the sample-script.js file to be deploy.js.

Also, if you'd like to, you can change the default greeting that is deployed to the blockchain by editing this script.

Now running the following command from this terminal window:

npx hardhat run scripts/deploy.js --network localhost

Now the smart contract has been deployed to the local Ethereum blockchain and we can interact with it from our Vue application using ethers.js.