I'm using PHP(CodeIgniter) to render a page built with vue cli.
Usually, if I want to pass a value from php to javascript I would do something like this:
var page = '<?php echo $page ?>';
But since the page is built with vue and all the js minified and all its not possible. I need an alternative solution to get a variable in vue which is sent from php.
Try this:here the js variable msg2 prints the php varible $test value= "Chris"
<html>
<head>
<title>Example</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
<p>{{ msg2 }}</p>
<?php
$test = "Chris";
?>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data: {
message: 'My first VueJS Task',
msg2: "<?php echo $test ?>"
}
});
</script>
</body>
</html>
You should renounce the idea of passing var page = '<?php echo $page ?>'; into JS.
1. Check your routes - i'm assuming that you still have PHP pages with logic and that Vue is on a sepparate Controller.
$route['default_controller'] = 'Home';
// Create a new controller with the name Vue before adding the routes.
$route['vue'] = 'Vue'; // default page
$route['vue/(:any)'] = 'Vue/$1'; // vue/with-any-passing/value/you/want
2. Controller: Vue.php
<?php
class Vue extends CI_Controller {
public function index( $uri_for_vue = '' )
{
$vueSetup = array(
'settings' => array(
'vueURL'=> $uri_for_vue
)
);
$this->load->view('vueView', $vueSetup);
}
}
3. View: vueView.php
<html>
<head>
<title>vue page</title>
<script type = "text/javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<h1>{{ message }}</h1>
<p>{{ msg2 }}</p>
<?php
$test = "Chris";
?>
</div>
<script id='vue-elem' data-vue='<?php echo json_encode($settings)?>' type = "text/javascript"></script>
<script type = "text/javascript">
var vueElem = document.getElementById('vue-elem');
var vueSettings = JSON.parse(vueElem.getAttribute("data-vue"));
// you may want to remove the element from html after it's contents is loaded in js, or reset the
// vueElem .setAttribute("data-vue", "{}");
// you will want to add this line in the minified version so vue can self-load
var page = vueSettings.vueURL;
console.log('page url', page );
// now you can load vue
</script>
</body>
</html>
page/id