<p>I want to extract data from Craft to a Vue component.</p>

<p>I create a vue component like this:</p>

<pre><code>{% set entry = craft.entries.section('homepage').first() %}
&lt;template&gt;
  &lt;h1&gt;{{entry}}&lt;/h1&gt;
&lt;/template&gt;
</code></pre>

<p>When I run the app it doesn't show the value of entry, but I created a file <code>title.twig</code> like this and it works: </p>

<pre><code>{% set entry = craft.entries.section('homepage').first() %}

&lt;h1&gt;{{ entry }}&lt;/h1&gt;
</code></pre>

<p>In vue project I added this line <code>Vue.config.delimiters = ["${", "}"];</code>in main.js file and I added<code>index.twig</code> file to <code>templates/</code> like: </p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"&gt;
    &lt;title&gt;Test&lt;/title&gt;
    &lt;link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&amp;display=swap" rel="stylesheet"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="app"&gt;&lt;/div&gt;
    &lt;script src="dist/build.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>How do I retrieve data directly from the Vue component? Thanks!</p>

CC BY-SA 4.0
2020-04-26T02:07:36.110Z
There's an article here that might be helpful for you: https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms
Brad Bell
CC BY-SA 4.0
2020-04-26T09:19:51.390Z
I read this article but, I didn't understand if I can use in a file like` homepage.vue` from an vue.js project
Cosmin Ciolacu
CC BY-SA 4.0
2020-04-28T06:59:29.147Z
Are you using Vue version 1 or 2?
Alex Roper
CC BY-SA 4.0
2020-04-28T12:44:18.027Z
I use Vue version 2
Cosmin Ciolacu
<vue>
Extract Craft CMS data to Vue component
# Extract Craft CMS data to Vue component

(Asked by: username_0 on 2020-04-24)

I want to extract data from Craft to a Vue component.
I create a vue component like this:
{% set entry = craft.entries.section('homepage').first() %}


When I run the app it doesn't show the value of entry, but I created a file title.twig like this and it works: 
{% set entry = craft.entries.section('homepage').first() %}

{{ entry }}

In vue project I added this line Vue.config.delimiters = ["${", "}"];in main.js file and I addedindex.twig file to templates/ like: 


  
    
    
    Test
    
    
  
  
    
    
  


How do I retrieve data directly from the Vue component? Thanks!

**Tags:** vue

> **Comments:**
> **username_1**: There's an article here that might be helpful for you: https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms  
> **username_0**: I read this article but, I didn't understand if I can use in a file like` homepage.vue` from an vue.js project  
> **username_2**: Are you using Vue version 1 or 2?  
> **username_0**: I use Vue version 2  

---

## 0 answers

