??? ?? ?? ????? ? ??? ?? ????.

? ????? VUE 2? ???? ?????? "??? ???"? ?????. VUE 3 ?? ??? ???? ???? ???? ??? ???? ?? ?? ?? ??? ???? ??? ??? ?? ? ????.

? ? ?, ?? WordPress ? ???? ??? ??? ?? ?? ??? ????? ??? ??????. ?? ???? ?? ??? ??? ????? ??? ?? ??? ??? ??????? ¹ . ?? ??? ? ???? ?? ??? ?????? ??? ?? ????.

??? ?? ???? ? ??? ??? ?? ????????? ??? ?? ?? ??? ????.

?? ?? SEO? ??? ??? ??? ???? ????.

?? ?? ? ??? ????? ???? ?? ? ? ??? ????.

(???!)

?? ??? ?? ???? ?? ??? ???? ???? ?? ?????. Sarah Drasner? ?? "jQuery? vue.js : No Build The Build ??? ??? ?"? ?? ?? ?????. ?? ??? jQuery ??? ??? VUE MicroApp?? ??? ??? ?????. ??? ?? ????? ???? WordPress? PHP ???? ??? ????? ? ??? ?? ?? ??????.

?? ??? ??? ?? ??? ??? ?? ?? ???.

PHP → JavaScript

NUXT? ?? Jamstack ??? ???? ???? ?? ??? ???? ???? ??? ???? ????. ???? ?? ???? ??? ??????? ?? ?.

??? PHP?? ?? ??? ???? ?? ??? ????. ??? ?? ??? ?? ^2? ???? ?????. WordPress get_template_part ?? ??? ?? ?? require ???? ????. ??? ??? ???? ??? ?? WordPress? ^?? ??? ???? ?? ??? ????.

??? Vue? ?? ??? ?? ???? ???????? JavaScript? ?? ? ?? ? ???? ? ? ????.

? ??? ??? ??? ?? ???? ?? Vue ??? inline-template ???. ??? ??? ?? ?? ??? ???? VUE ?? ??? ?? ? ? ????. ???? ?? HTML? ?? ?? ?????? ?? DOM ??? ???? ? ??? ??? ???????.

?? ????? HTML? ???? VUE? ?????. ??? ????? VUE? ?? WordPress? ?? ????? ?? ??? ? ??? ???? ?? ? ??? ?? ??? ?? ??? ? ????. ?? .Vue ?? (? ?? ?? ????? ?? ??? ????? ?? ?)?? ??, ??? PHP? ?? ? ???, CSS? ??? ? JavaScript? ?? ? ???? ??? ?? ??? ?? ? ? ??????.

? ?? ?? ??? ????? ???? ?? ??? ???? ? ?? ??? ???? ????. ?? ???? ???? ??? ??? ??? ?????. ?? ?? ?? ??? ???? ??? ??? ?????. ?????, ??? ???? ?? ? ??? ?? ???? ??? ? ??????.

??? ???? ?? ????? ???? ?? ?? ??? ?? ? ????. ???? ? ???? ?? ?? ?? ??? ??? ?????? ?? ?? ???? VUE ?? ?????? ?? ?? ?? ??? ?????.

? ?? ??? ?? PHP ??? ???? get_template_part ???? ??? ?????.

?? ??

VUE? ?? ???? ?? ? ? ???? ? ??? ??? ????. ??, Vue? ?????????? ??? ????. ????? ??? ??? ??? ????. ?? ??? ?? ?? ??? ? ???? ?? ??? ?? ??? ?? ? ?? ????? ?? ?? ??????? ???? (?? ?? ?? ??? ?? ??). ?? ??? ?? :

  php / * header.php * /?>
<div id="site-wrapper">

 php / * buter.php * /?>
</div>
 php wp_footer (); ?>

? ?? ?? ??? body ??? ??? VUE? ???? ??? DOM? ?? ?? ? ? ?????????? ????. ??? 5 ?? ?? ?? ( in_footer )?? wp_enqueue_script ??? true ???. ?? VUE? ????????? ?? ?? ????? ????? ?????.

  php // functions.php

add_action ( 'wp_enqueue_scripts', function () {
  wp_enqueue_script ( 'vue', get_template_directory_uri (). '/assets/js/lib/vue.js', null, null, true); // ?? ???? vue.min.js? ?????
  wp_enqueue_script ( 'main', get_template_directory_uri (). '/assets/js/main.js', 'vue', null, true);
});

?????, ?? ??????? site-wrapper ???? VUE? ??????.

 // main.js

??? vue ({
  el : document.getElementById ( 'site-wrapper')
})

? ?? ?? ??

??? ?? ?? ???? ?? ??? ????.

  php / * single-post.php * /?>
 php /* ... ?? ??* /?>

? ?? ?? ??? ?????? ???? ?? ??? ?????.

 // main.js

vue.component ( 'star-rating', {
  ??? () {
    ?? {
      ?? : 0
    }
  },
  ?? : {
    rate (i) {this.rating = i}
  },
  ??: {
    ?? (val) {
      // ??? ??? ???? ??? ??? ???? ?? ????? (val> 5) 
        this.rating = 5

      // ... LocalStorage ?? ?? ?? ?? ? ??}
  }
})

// ?? ?? ??? ??? ? VUE? ???????.
??? vue ({
  el : document.getElementById ( 'site-wrapper')
})

?? ?? ???? ??? PHP ??? ???. ?? ???? 6 ?? ??? ????? (1 ?? Unrated ? 5 ?? ?)? ?????. ? ???? ?? ? ?? ???? ??? SVG? ?????.

  php/ * ?? ??/Star-rating.php */?>
<star-rating inline-template="">
  <div>
    <p>?? ??? :</p>
    <svg v-for="i in 5" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</star-rating>

??? ?? ?? ?? ??? ??? ??? ??? ?? ?? ??? ??? ??? ???? ????. ?? ?? ??? CSS ??? ?? ?? ? ? ???? (? :<star-rating></star-rating> .star-rating ?? ?? ? ? ????).

?? ??? ??? ???? ??????.

  php / * single-post.php * /?>
 php /* ?? ??* /?>
 php get_template_part ( 'components/star-rating'); ?>

?? ??? ??? HTML? ???? ?????<star-rating></star-rating> . vue 's is directive? ?? ??? ??? ??? ? ????.

<div inline-template="" is="star-rating">...</div>

?? ?? ??? ??? 5 ? ??? ??? ???? WordPress ???? ?? ??? ?? ?? (???, ??? ? ?? WordPress ???? ?? ??? ?? ?? ??)? ???? ? ??? ???? ?? ? ? ??? ?????. ??? ? ?? ??? ?? ? maxRating ??? ??? ???????.

  php // components/star-rating.php

// max_rating? ACF ??? ????? $ max_rating = get_field ( 'max_rating');
?>
<div :max-rating="<?= $max_rating ?>" inline-template="" is="star-rating">
  <div>
    <p>?? ??? :</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

??? ?????? ??? ???? ?? ?? 5? ?????.

 // main.js

vue.component ( 'star-rating', {
  ?? : {
    ?? : {
      ?? : ??,
      ??? : 5 // ?????}
  },
  ??? () {
    ?? {
      ?? : 0
    }
  },
  ?? : {
    rate (i) {this.rating = i}
  },
  ??: {
    ?? (val) {
      // ??? ??? ??? ???? ??? ??? ???? ??? (val> maxrating) 
        this.rating = maxrating

      // ... LocalStorage ?? ?? ?? ?? ? ??}
  }
})

?? ???? ??? ????? ???? ID? ???????. ?? ?? :

  php // components/star-rating.php

$ max_rating = get_field ( 'max_rating');
$ recipe_id = get_the_id ();
?>
<div :max-rating="<?= $max_rating ?>" :recipe-id="<?= $recipe_id ?>" inline-template="" is="star-rating">
  <div>
    <p>?? ??? :</p>
    <svg v-for="i in maxRating" :key="i"><path :fill="rating >= i ? 'black' : 'transparent'" d="..."></path></svg>
  </div>
</div>

// main.js

vue.component ( 'star-rating', {
  ?? : {
    ?? : { 
      // ??? ??},
    ???? : {
      ?? : ???,
      ?? : True
    }
  },
  // ...
  ??: {
    ?? (val) {
      // ??? ?? // ??? ??? ??? ?? // ?? ?? LocalStorage ?? WP? ??????. wp ?? endpoint someKindOfStorageDefinedElsewhere.save (this.recipeid, this.rating)
    }
  },
  ??? () {
    this.rating = someKindOfStorageDefinedElsewhere.load (this.recipeid)    
  }
})

?? ?? ???? ???? ??? (?? ??)? ??? ?? ?? ??? ???? ? ????.

  php // archive.php

if (hade_posts ()) : while (hade_posts ()) : the_post (); ?>
 php // ??, ?? ?? ? : ?? :
  get_template_part ( 'components/star-rating'); ?>
 pHP ?; endif; ?>

... (??? ???? ?? ?? ??) .. ?? ???? ?? ??? ??? ????? ?? ? ? ????. ??? ??? ???? ???? ???? ? ?? ??? ???? ? ??? ?? ?? ??? ?? ?? ? ? ????. ??? ?? ??? ?? ? ????.

? ??? WordPress ???? VUE ?? ??? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!