Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-04-26T02:07:36.110Z
Comments.Text: There's an article here that might be helpful for you: https://nystudio107.com/blog/using-vuejs-2-0-with-craft-cms
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-04-26T09:19:51.390Z
Comments.Text: I read this article but, I didn't understand if I can use in a file like` homepage.vue` from an vue.js project
Comments.UserDisplayName: Cosmin Ciolacu
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-04-28T06:59:29.147Z
Comments.Text: Are you using Vue version 1 or 2?
Comments.UserDisplayName: Alex Roper
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-04-28T12:44:18.027Z
Comments.Text: I use Vue version 2
Comments.UserDisplayName: Cosmin Ciolacu
Tags: <vue>
Title: Extract Craft CMS data to Vue component
ThreadText: # 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() %}
  <template>
    <h1>{{entry}}</h1>
  </template>
  
  ```
  
  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() %}
  
  <h1>{{ entry }}</h1>
  
  ```
  
  In vue project I added this line `Vue.config.delimiters = ["${", "}"];`in main.js file and I added`index.twig` file to `templates/` like:
  
  ```
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
      <title>Test</title>
      <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
      <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" rel="stylesheet">
    </head>
    <body>
      <div id="app"></div>
      <script src="dist/build.js"></script>
    </body>
  </html>
  
  ```
  
  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
  
  