asdf extendable version manager for Vue setup
Tags: linux, vue, productivity, beginners
Published: 2020-03-11 15:06:47

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](https://www.vuemastery.com/free-weekend).



Article Navigation

- [Asdf install](#section-1)

- [Nodejs and yarn install, asdf plugins](#section-2)

- [Vue -CLI](#section-3)



#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](https://asdf-vm.com/#/core-manage-asdf-vm) 



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:



```shell
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)**:

```bash
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)**:

```bash
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)**

```shell
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)** 

```shell
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:

```shell
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:

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



**For Ubuntu ** type:

```shell
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**: 

```shell
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:

```shell
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



```shell
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:

```shell
asdf list all nodejs
```



Now to install `nodejs` type:

```powershell
asdf install nodejs 12.10.0
```

**After installation to make it global(recommended)**

```shell
asdf global nodejs 12.10.0
```

or local

```shell
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:



```shell
 node --version                                                                                                                                  
    v12.10.0
 npm -v                                                                                                                                               
    6.10.3

```



Install Yarn:



To get yarn ewe do the same, so type:

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

```
asdf plugin-add yarn
```

```shell
asdf list all yarn
```

```shell
asdf install yarn 1.20.0
```

```shell
asdf global yarn 1.20.0 
```

Veirfy that yarn is installed by typing:

```shell
yarn --version                                                                                                                                    
1.20.0
```

Good yarn is ready.



Section 3 

Vue-cli



To install vue-cli globally(recommended) use:

```shell
yarn global add @vue/cli
```



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

```shell
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