Open the Retail Summary Widget using your Code Editor.
Open the local-liquid-variables.js file in /src/liquid/ and copy the following code:
user: { name:['test'], },This file lets you simulate Liquid variables from Modyo Platform in your local environment.
Open App.vue and copy the following code:
import liquidParser from './liquid/liquidParser';
This will import a library that will enable functions to parse variables locally.
In App.vue, copy the following code between lines 78 and 79:
username: liquidParser.parse('{{user.name}}'),This username will act as our variable inside Vue, it contains the logic from the liquidParser library. The function accepts correct Liquid code from the local-liquid-variables.js file.
In App.vue, copy the following code between lines 36 and 37:
<div class="header-summary mb-3">
<h3 class="h4 font-weight-bold">
Hello {{ username }}
</h3>
<h3 class="h4">
Welcome to Dynamic
</h3>
</div>
Run the local server from your Terminal using
npm serve and verify the results.
The username was applied successfully.
🏠 Learning Path: Build Microfrontends with the Modyo's CLI