You are here

Drupal 8 + Vue.js

9 posts / 0 new
Τελευταία δημοσίευση
Drupal 8 + Vue.js

Καλησπέρα και χρόνια πολλά σε όλους.
Άρχισα να ασχολούμαι με το Vue.js και σε tutorial είδα πως δένει με το Drupal για να δημιουργήσει headless cms,
ωστόσο είτε δεν έδειξε είτε εγώ δεν κατάλαβα το file structure για να δουλεψει.
Με λίγα λόγια: κάνωντας ενα fresh installation του Drupal, τοποθετούμε το Vue σε κάποιον φάκελο του Dupal ή το αντίστροφο;

Ευχαριστώ εκ των προτέρων.

Drupal version: 

Έχεις δύο επιλογές:
1. Να βάλεις το Drupal να σερβίρει το Vuejs + τον js κώδικα σου από το theme η απο κάποιο custom module που θα βάζει JS στην σελίδα.

2. Να διαχωρίσεις την js εφαρμογή σου τελείως από το Drupal, δλδ να να φτιάξεις ξεχωριστά το Vue app που θα χτυπάει τα JSON endpoints που θα έχεις φτιάξει με το Drupal(headless).
Δεν έχει σημασία το file structure, μπορείς να βάλεις την js εφαρμογή όπου θέλεις ... ακόμα και σε άλλο domain(πρόσεχε τα CORS, πρέπει να υπάρχει drupal module).

Αχιλλέα σε ευχαριστώ πολύ,
ωραία, το δοκιμάζω ευθύς αμέσως, να είσαι καλά...

Αχιλλέα χαίρε,
μια μεταχρονολογημένη ερώτηση περι Vue: Στην πρώτη περίπτωση που θα σερβίρω το Vue μέσα απο τον js φάκελο, θα υπάρχει στον φάκελο του theme σελίδα index.html; Εαν όχι που θα "χτυπάει" για να διαβάζει το το presentational αρχείο του Vue;

Γεια χαρά,
Στο drupal οι σελίδες παράγονται δυναμικά, οπότε όχι δε χρειάζεσαι index.html αυτό που χρειάζεσαι είναι το Vue instance να κάνει bind σε κάποιο dom element (id app στην παρακάτω περίπτωση):

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Δηλαδή θέλεις ένα tag με id + την js με το vue.
Τώρα, το πώς θα φτιάξεις αυτό το tag, μπορείς να το κάνεις με custom block η να το φτιάξεις σε κάποιο template αρχειο, υπάρχουν πολλοί τρόποι στο drupal.

Κάπου δεν μου κόβει με το headless :) δεν μου δουλεύει...
Για την τιμή των όπλων θα παραθέσω την διαδικασία που ακολουθώ, να δείτε εάν και που κάνω λάθος. Πάντοτε local, κάνω fresh intallation Drupal, ενεργοποιώ τα 4 modules του web services και φτιάχνω theme. Όπου στο info.yml file γράφω
name: themename
type: theme
core: 8.x
base theme: classy

libraries:
themename/global-styling

και στο libraries.yml γράφω:

global-styling:
css:
layout:
css/styles.css: {}
js:
js/vue.js: {}
js/vue-router.js: {}
js/vue-resource.js: {}
js/main.js: {}

δημιουργώ τους ανάλογους φακέλους όπου έχω μέσα τα ανάλογα αρχεία, στο δε main.js αρχείο γράφω:

var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

Κάνω copy-paste το αρχείο page.html.twig, από το classy, στο template φάκελο του theme μου, και είτε κάπου μέσα στο αρχείο γράφω το <div id=”app”></div> είτε σβήνω όλο το πρωτύτερο περιεχόμενο του αρχείο και γράφω μόνον το id tag.
Στην περίπτωση που το κάνω με custom block, τότε φτιάχνω custom block και στο body σε source mode γράφω <div id=”app”></div> και το βάζω να εμφανίζεται στο content. Τζίφος.
Ξέρω κάνω κάποιο παιδικό λάθος, αλλά δεν ξέρω ποιο είναι. Κάποια ιδέα κάποιος;

Ευχαριστώ εκ των προτέρων

1. To Twig και το Vuejs έχουν ίδιο τρόπο που κάνουν print variables τη σύναξη {{ variable }} οπότε πρέπει να αλλάξεις το ένα από τα δύο, να αλλάξεις το vue είναι πιο εύκολο:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  delimiters: ['${', '}']
})

2. Πρέπει να τυπώσεις κάτι:

      <div id="app">
          ${ message }   // <--- άλλαξα τον τρόπο που τυπώνει το vuejs στο delimiters παραπάνω.
      </div>

Το δοκίμασα και παίζει κανονικά :)

Εναλλακτικά αν δεν θες να αλλάξεις delimiter, μπορείς να χρησιμοποιήσεις το verbatim tag του twig και μέσα να τυπώσεις τα variables του vue.

Κι όμως γυρίζει :) σε χιλιοευχαριστώ Αχιλλέα