asdf extendable version manager for Vue setup

Hi everyone,

Today I wanted to write a guide on how to set up Vue CLI real quick and also help everyone to follow more easily Vue Mastery event for this weekend.

If you didn't read about it and would like to participate click this event link.

Article Navigation

• Asdf install

• Nodejs and yarn install, asdf plugins

• Vue -CLI

Section 1

Asdf Install

Before we start this guide please read this(Important)

This guide will work only for Mac and Linux. You can also use a VM for Linux

asdf has a problem if you uninstall a global package with yarn or npm so if you install something globally don't remove it.

Wait, a second Wolfiton?!, What is a global package?

A global package is code created by someone else or by yourself that contains functions, classes, methods, cli-tools, that you can use in your without the need to specify where this package is located.

An example would be:

vue create - can be used directly if installed globally.

if it is installed locally you need to generate a project with yarn or npm then type:

yarn add @vue/cli

./node_modules/location_of_vue/vue create

As you can see Dear Reader a lot more work and complication

Back to our article, we are going to follow the official docs from asdf.

The docs can be found here asdf docs

Required(you will need):

• git

• sudo access

• Recommended(zsh)

• Coffee or tea

WARNING DO NOT USE BREW TO INSTALL ASDF IT WAS REPORTED TO HAVE PROBLEMS

So let's start by going home:

cd ~

pwd - confirm that you are in /home/loggedin__user for me it is /home/dan

Now type:

git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.7.7

The instructions below apply for different terminals you may have please read carefully , if you are unsere what to follow ask in the comments for help.

Only if you have bash on Linux installed follow the instructions below, don not follow them if you have bash zsh or fish on Mac

For bash users on Linux type the following(only for bash terminals on Linux):

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bashrc
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bashrc

Only if you have bash on Mac installed follow the instructions below, don not follow them if you have bash zsh or fish on Linux

For bash users on Mac type the following(only for bash terminals on Mac):

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.bash_profile
echo -e '\n. $HOME/.asdf/completions/asdf.bash' >> ~/.bash_profile

Note if you are using Catalina or newer, the default shell has changed to Zsh follow the zsh instruction instructions.

Only if you have zsh installed follow the instructions below, don not follow them if you have bash or fish

For zsh users in general(both Linux or Mac)

echo -e '\n. $HOME/.asdf/asdf.sh' >> ~/.zshrc

Only if you have fish installed follow the instructions below, don not follow them if you have bash or zsh

For fish users (both Linux or Mac)

echo 'source ~/.asdf/asdf.fish' >> ~/.config/fish/config.fish
mkdir -p ~/.config/fish/completions; and cp ~/.asdf/completions/asdf.fish ~/.config/fish/completions

After you followed the intructions for your terminal we should now have dear reader asdf installed.

So close the terminal and open it up again.

Now if we type zsdf we should see the following output:

version: v0.7.7-4b2b71a

MANAGE PLUGINS
  asdf plugin add <name> [<git-url>]       Add a plugin from the plugin repo OR, add a Git repo
                                           as a plugin by specifying the name and repo url
  asdf plugin list [--urls] [--refs]       List installed plugins. Optionally show git urls and git-ref.
  asdf plugin list all                     List plugins registered on asdf-plugins repository with URLs
  asdf plugin remove <name>                Remove plugin and package versions
  asdf plugin update <name> [<git-ref>]    Update a plugin to latest commit or a particular git-ref.
  asdf plugin update --all                 Update all plugins


MANAGE PACKAGES
  asdf install [<name> <version>]          Install a specific version of a package or,
                                           with no arguments, install all the package
                                           versions listed in the .tool-versions file
  asdf uninstall <name> <version>          Remove a specific version of a package
  asdf current                             Display current version set or being used for all packages
  asdf current <name>                      Display current version set or being used for package
  asdf where <name> [<version>]            Display install path for an installed or current version
  asdf which <command>                     Display the path to an executable
  asdf shell <name> <version>              Set the package version in the current shell
  asdf local <name> <version>              Set the package local version
  asdf global <name> <version>             Set the package global version
  asdf list <name>                         List installed versions of a package
  asdf list all <name>                     List all versions of a package


UTILS
  asdf exec <command> [args..]             Executes the command shim for current version
  asdf env <command> [util]                Runs util (default: `env`) inside the environment used for command shim execution.
  asdf reshim <name> <version>             Recreate shims for version of a package
  asdf shim-versions <command>             List on which plugins and versions is command available
  asdf update                              Update asdf to the latest stable release
  asdf update --head                       Update asdf to the latest on the master branch

"Late but latest"
-- Rajinikanth

For Mac we will need the following packages to be installed using spack, type:

spack install \
  coreutils automake autoconf openssl \
  libyaml readline libxslt libtool unixodbc \
  unzip curl

*For Ubuntu * type:

sudo apt install \
  automake autoconf libreadline-dev \
  libncurses-dev libssl-dev libyaml-dev \
  libxslt-dev libffi-dev libtool unixodbc-dev \
  unzip curl

For Fedora type:

sudo dnf install \
  automake autoconf readline-devel \
  ncurses-devel openssl-devel libyaml-devel \
  libxslt-devel libffi-devel libtool unixODBC-devel \
  unzip curl

For Arch you will have to use pac or yay to install as per plugin requirements

Seection 2

Install Node Yarn

We can list all the plugins that are available for asdf like this:

asdf plugin list all - if you run this command the list will be quite big.

So let's do it like this:

asdf plugin list all | grep "nodejs"
nodejs                    *https://github.com/asdf-vm/asdf-nodejs.git

Perfect now we can follow the link and install nodejs, let's do that.

For Mac let's use spack:

spack install coreutils gpg

For Ubuntu:

sudo apt-get install dirmngr gpg

Everybody does the below commands

asdf plugin-add nodejs https://github.com/asdf-vm/asdf-nodejs.git
bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring

To see all the version of node that can be installed type:

asdf list all nodejs

Now to install nodejs type:

asdf install nodejs 12.10.0

After installation to make it global(recommended)

asdf global nodejs 12.10.0

or local

asdf local nodejs 12.10.0

Differences between local and global you can use a different nodejs version as per project. With global you have only one nodejs version that is used by all projects.

To verify we type:

 node --version                                                                                                                                  
    v12.10.0
 npm -v                                                                                                                                               
    6.10.3

Install Yarn:

To get yarn ewe do the same, so type:

asdf plugin list all | grep  "yarn"  
yarn *https://github.com/twuni/asdf-yarn.git

asdf plugin-add yarn

asdf list all yarn

asdf install yarn 1.20.0

asdf global yarn 1.20.0 

Veirfy that yarn is installed by typing:

yarn --version                                                                                                                                    
1.20.0

Good yarn is ready.

Section 3

Vue-cli

To install vue-cli globally(recommended) use:

yarn global add @vue/cli

To install the version used by Vue Mastery courses from what I could see

yarn global add @vue/cli@3.5.0

We are done Dear Reader

I hope you enjoyed the tutorial and explanations.

If you do like the article share it on social, to help others as well.

Credits:

https://asdf-vm.com/#/core-manage-asdf-vm

https://github.com/asdf-vm/asdf-nodejs

https://github.com/twuni/asdf-yarn

https://cli.vuejs.org/guide/installation.html

Vue Mastery Github from one of the projects