guides > javascript

Vue

Last updated Invalid Date

Using the Tipe Vue Starter

If you'd like to use Vue with Tipe, we've created a Vue Starter for you that's ready to go.

Download and config

Download the Tipe Vue Starter. At the command line, in the project directory, run npm install or yarn install.

Open the project with your favorite code editor and look at the env.sample file. env sample file

The env.sample file gives you an example for creating your own .env file. An .env file is where you put environment variables, and for Tipe, you can use it to hold your KEYS. The env.sample file is as follows:

.env sample file

Save a new file called simply .env in the same location as the sample file and populate it with the contents of the sample. Alternatively, you could just rename it by removing .sample.

Next, log into Tipe and retrieve your keys from the API Keys section of the dashboard. The API Keys icon is on the left sidebar.

API Keys Icon

In the API Keys section, you'll see your keys. The following image illustrates their location. They're blurred out here for security.

Secret Keys Location

Copy and paste the Org Secret into your .env file next to TIPE_ID. Do the same with the Generated API key (the bottom one in the illustration), pasting it into the TIPE_API_KEY field.

Now your .env file should look something like this:

env file

After saving, go back to the command line and run npm run dev. Next, switch over to your browser and go to http://localhost:3000/. You should see the following:

Vue landing page for starter app

If a Document has a Media block that's null then you get the TypeError. If you associate a media image and then remove it, it'll get set to null. And then you get the TypeError.

For the latest on our Vue Starter, watch the repo on GitHub where we welcome contributions!